huangmh
/
client_iot-daoshi-template-v
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 首页横板

v1.0.1
jiannibang 3 years ago
parent
3f0af9cabc
commit
dd8193fa3f
9 changed files with 305 additions and 201 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/App.vue
  2. 6
      src/base/Temperature/Temperature.vue
  3. 14
      src/base/Time/Time.vue
  4. 37
      src/components/PublicComponent/SearchBar.vue
  5. 1
      src/components/Search/Search.vue
  6. 11
      src/layouts/View.vue
  7. BIN
      src/themes/main/billboardLoc.png
  8. 2
      src/themes/main/style.json
  9. 431
      src/views/Index/Index.vue

4
src/App.vue
View File

@ -13,8 +13,8 @@ import PublicComponent from '@/components/PublicComponent/PublicComponent.vue'
body,
html,
#app {
width: 1080px;
height: 1920px;
width: 100vw;
height: 100vh;
background-color: var(--global-appBackground);
overflow: hidden;
}

6
src/base/Temperature/Temperature.vue
View File

@ -21,6 +21,12 @@ const { weather, icon } = useWeather()
align-items: center;
z-index: 11;
}
@media (min-aspect-ratio: 1/1) {
.Temperature-wrapper {
top: 32px;
}
}
.weather-icon {
color: var(--weather-iconColor);
font-size: 36px;

14
src/base/Time/Time.vue
View File

@ -50,4 +50,18 @@ const { dateRef, whichWeekRef } = useDay()
color: var(--time-weekColor);
z-index: 11;
}
@media (min-aspect-ratio: 1/1) {
.time {
top: 32px;
left: 1499px;
}
.month {
top: 38px;
left: 1623px;
}
.week {
top: 54px;
left: 1623px;
}
}
</style>

37
src/components/PublicComponent/SearchBar.vue
View File

@ -18,14 +18,18 @@ const { theme } = storeToRefs(store)
</script>
<style lang="scss" scoped>
@media (max-aspect-ratio: 1/1) {
.row {
position: fixed;
top: 260px;
left: 68px;
right: 68px;
height: 100px;
display: flex;
z-index: 100;
}
}
.row {
position: fixed;
top: 260px;
left: 68px;
right: 68px;
height: 100px;
display: flex;
z-index: 100;
.back {
width: 130px;
height: 100px;
@ -65,4 +69,23 @@ const { theme } = storeToRefs(store)
}
}
}
@media (min-aspect-ratio: 1/1) {
.row {
.back {
position: fixed;
left: 68px;
top: 161px;
z-index: 100;
}
.bar {
position: fixed;
width: 698px;
top: 38px;
left: 0;
right: 0;
margin: auto;
z-index: 100;
}
}
}
</style>

1
src/components/Search/Search.vue
View File

@ -58,7 +58,6 @@ import { useFacilityNav } from '@/composables/useFacilityNav'
import { useStatistics } from '@/composables/useStatistics'
import Dialog from '@/layouts/Dialog.vue'
import FacilityItem from '@/base/FacilityItem/FacilityItem.vue'
import Tabs from '@/components/Tabs/Tabs.vue'
import SearchResultList from '@/components/SearchResultList/SearchResultList.vue'
const KeyboardByLetter = defineAsyncComponent(() => import('@/components/KeyboardByLetter/KeyboardByLetter.vue'))

11
src/layouts/View.vue
View File

@ -42,5 +42,16 @@ defineProps({
height: 515px;
}
}
@media (min-aspect-ratio: 1/1) {
.bgTop {
height: 280px;
&.long {
height: 280px;
}
&.mid {
height: 280px;
}
}
}
}
</style>

BIN
src/themes/main/billboardLoc.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 911 B

2
src/themes/main/style.json
View File

@ -81,7 +81,7 @@
"billboard": {
"background": "#dee6f6",
"arrowRadius": "100px",
"legendColor": "rgba(255, 255, 255, 0.6)",
"legendColor": "rgba(0, 0, 0, 0.6)",
"titleColor": "#000000",
"metaColor": "rgba(0, 0, 0, 0.6)"
},

431
src/views/Index/Index.vue
View File

@ -15,51 +15,50 @@
</div>
</div>
<div class="content">
<div class="r1">
<div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })">
<div class="top">
<div class="title">找店</div>
<div class="meta">{{ guideDesc }}</div>
<img src="./guideImg.svg" />
</div>
<div class="meta1">当前位置<img :src="theme.images.loc" /></div>
<div class="meta2">{{ bf }}</div>
<div class="bottom-right">
<QRCodeFromText
class="qrcode"
:size="80"
:text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置`"
v-if="currentFloor"
></QRCodeFromText>
扫我导航
</div>
<div class="guide" @click="goPage({ title: '地图导览', path: '/guide' })">
<div class="top">
<div class="title">找店</div>
<div class="meta">{{ guideDesc }}</div>
<img src="./guideImg.svg" />
</div>
<div v-if="showFood" class="food" @click="goPage({ title: '推荐美食', path: '/foods' })">
<div class="title">
<h1>推荐美食</h1>
<h2>此时此刻，美食正在等你</h2>
</div>
<div class="grid">
<img class="item" v-for="shop of foodList" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
</div>
<div class="meta1">当前位置<img :src="theme.images.loc" /></div>
<div class="meta2">{{ bf }}</div>
<div class="bottom-right">
<QRCodeFromText
class="qrcode"
:size="80"
:text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置`"
v-if="currentFloor"
></QRCodeFromText>
扫我导航
</div>
<div v-else class="rec" @click="goPage({ title: '品牌列表', path: '/brand' })">
<div class="title" :style="{ backgroundImage: `url(${theme.images.recBg})` }">
<h1>推荐品牌</h1>
<h2>心动之选，拥抱美好生活</h2>
</div>
<div class="grid">
<img class="item" v-for="shop of shopList.slice(0, 16)" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
</div>
</div>
<div v-if="showFood" class="food" @click="goPage({ title: '推荐美食', path: '/foods' })">
<div class="title">
<h1>推荐美食</h1>
<h2>此时此刻，美食正在等你</h2>
</div>
<div class="grid">
<img class="item" v-for="shop of foodList" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
</div>
</div>
<div class="r2">
<div v-else class="rec" @click="goPage({ title: '品牌列表', path: '/brand' })">
<div class="title" :style="{ backgroundImage: `url(${theme.images.recBg})` }">
<h1>推荐品牌</h1>
<h2>心动之选，拥抱美好生活</h2>
</div>
<div class="grid">
<img class="item" v-for="shop of shopList.slice(0, 16)" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
</div>
</div>
<div class="menu">
<div class="item" v-for="tab of sidebarList" :key="tab.title" @click="goPage(tab)">
<div class="icon"><img :src="theme.images[tab.moduleName]" /></div>
<div class="title">{{ switchLanguage(tab, 'title') }}</div>
</div>
</div>
<div class="r3">
<div class="acts">
<EffectFade :list="activityList ?? []">
<template v-slot="{ item }">
<div class="banner-wrapper">
@ -177,177 +176,180 @@ getActivityList(3).then(({ data }) => {
}
}
.content {
position: relative;
width: 100%;
flex: 1;
padding: 40px 68px 0 68px;
.r1 {
display: flex;
.guide {
position: absolute;
width: 339px;
height: 557px;
.guide {
position: relative;
flex: 0 0 339px;
width: 339px;
height: 557px;
background: var(--index-guideBackground);
border: var(--index-guideBorder);
border-radius: var(--global-radius, 32px);
overflow: hidden;
padding: 460px 0 0 40px;
left: 68px;
top: 40px;
background: var(--index-guideBackground);
border: var(--index-guideBorder);
border-radius: var(--global-radius, 32px);
overflow: hidden;
padding: 460px 0 0 40px;
.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 432px;
background: var(--index-guideTopBg);
border-radius: var(--global-radius, 32px);
padding: 40px;
z-index: 1;
.title {
font-style: normal;
font-weight: 900;
font-size: 56px;
line-height: 66px;
color: #ffffff;
}
.meta {
margin-top: 8px;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: rgba(255, 255, 255, 0.8);
}
img {
margin-top: 40px;
width: 259px;
}
}
.bottom-right {
position: absolute;
width: 108px;
height: 156px;
right: 0;
bottom: 0;
background: var(--index-guideQrcodeBg);
padding-top: 132px;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-align: center;
color: var(--index-guideMetaColor);
.qrcode {
position: absolute;
width: 84px;
height: 84px;
background: #fff;
display: flex;
right: 12px;
bottom: 29px;
justify-content: center;
align-items: center;
}
}
.meta1 {
display: inline-flex;
font-weight: 700;
font-size: 20px;
line-height: 23px;
color: var(--index-guideMetaColor);
margin-bottom: 6px;
img {
width: 20px;
height: 20px;
margin-left: 4px;
}
}
.meta2 {
font-weight: 900;
font-size: 32px;
line-height: 38px;
color: var(--index-guideColor);
}
}
.food,
.rec {
h1 {
.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 432px;
background: var(--index-guideTopBg);
border-radius: var(--global-radius, 32px);
padding: 40px;
z-index: 1;
.title {
font-style: normal;
font-weight: 900;
font-size: 56px;
line-height: 66px;
color: #ffffff;
margin-bottom: 8px;
}
h2 {
.meta {
margin-top: 8px;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: rgba(255, 255, 255, 0.8);
}
.grid {
img {
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 485px;
gap: 15px;
.item {
width: 110px;
height: 110px;
background: #ffffff;
border-radius: var(--global-radius, 12px);
padding: 10px;
object-fit: contain;
}
width: 259px;
}
}
.food {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin-left: 40px;
background: var(--index-foodBg);
border-radius: var(--global-radius, 32px);
border: var(--index-foodBorder);
align-items: center;
overflow: hidden;
.title {
margin-top: 4px;
width: 549px;
background: center / cover no-repeat url(./foodBg.png);
height: 160px;
flex: 0 0 160px;
box-shadow: 0px 15px 26px rgba(244, 142, 88, 0.32);
border-radius: var(--global-radius, 27px);
padding: 32px 0 0 40px;
.bottom-right {
position: absolute;
width: 108px;
height: 156px;
right: 0;
bottom: 0;
background: var(--index-guideQrcodeBg);
padding-top: 132px;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-align: center;
color: var(--index-guideMetaColor);
.qrcode {
position: absolute;
width: 84px;
height: 84px;
background: #fff;
display: flex;
right: 12px;
bottom: 29px;
justify-content: center;
align-items: center;
}
}
.rec {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin-left: 40px;
background: var(--index-recBg);
border: var(--index-recBorder);
border-radius: var(--global-radius, 32px);
align-items: center;
overflow: hidden;
.title {
margin-top: 8px;
width: 549px;
background: center / cover no-repeat;
height: 160px;
flex: 0 0 160px;
box-shadow: 0px 15px 26px rgba(230, 201, 148, 0.3);
border-radius: var(--global-radius, 27px);
padding: 32px 0 0 40px;
.meta1 {
display: inline-flex;
font-weight: 700;
font-size: 20px;
line-height: 23px;
color: var(--index-guideMetaColor);
margin-bottom: 6px;
img {
width: 20px;
height: 20px;
margin-left: 4px;
}
}
.meta2 {
font-weight: 900;
font-size: 32px;
line-height: 38px;
color: var(--index-guideColor);
}
}
.food,
.rec {
position: absolute;
top: 40px;
left: 447px;
width: 565px;
height: 557px;
h1 {
font-weight: 900;
font-size: 56px;
line-height: 66px;
color: #ffffff;
margin-bottom: 8px;
}
h2 {
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: rgba(255, 255, 255, 0.8);
}
.grid {
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 485px;
gap: 15px;
.item {
width: 110px;
height: 110px;
background: #ffffff;
border-radius: var(--global-radius, 12px);
padding: 10px;
object-fit: contain;
}
}
}
.r2 {
.food {
display: flex;
flex-direction: column;
margin-left: 40px;
background: var(--index-foodBg);
border-radius: var(--global-radius, 32px);
border: var(--index-foodBorder);
align-items: center;
overflow: hidden;
.title {
margin-top: 4px;
width: 549px;
background: center / cover no-repeat url(./foodBg.png);
height: 160px;
flex: 0 0 160px;
box-shadow: 0px 15px 26px rgba(244, 142, 88, 0.32);
border-radius: var(--global-radius, 27px);
padding: 32px 0 0 40px;
}
}
.rec {
display: flex;
flex-direction: column;
margin-left: 40px;
background: var(--index-recBg);
border: var(--index-recBorder);
border-radius: var(--global-radius, 32px);
align-items: center;
overflow: hidden;
.title {
margin-top: 8px;
width: 549px;
background: center / cover no-repeat;
height: 160px;
flex: 0 0 160px;
box-shadow: 0px 15px 26px rgba(230, 201, 148, 0.3);
border-radius: var(--global-radius, 27px);
padding: 32px 0 0 40px;
}
}
.menu {
position: absolute;
left: 68px;
right: 68px;
top: 637px;
display: flex;
margin-top: 40px;
.item:nth-child(5n + 1) {
.icon {
background: var(--menu-indexBg1);
@ -402,8 +404,11 @@ getActivityList(3).then(({ data }) => {
margin-left: 24px;
}
}
.r3 {
margin-top: 40px;
.acts {
position: absolute;
left: 68px;
right: 68px;
bottom: 46px;
width: 944px;
height: 531px;
:deep(.swiper) {
@ -429,13 +434,13 @@ getActivityList(3).then(({ data }) => {
}
.banner-wrapper {
position: relative;
width: 944px;
height: 531px;
width: 100%;
height: 100%;
border-radius: var(--global-radius, 24px);
overflow: hidden;
.banner {
width: 944px;
height: 531px;
width: 100%;
height: 100%;
object-fit: cover;
}
.name {
@ -469,4 +474,50 @@ getActivityList(3).then(({ data }) => {
}
}
}
@media (min-aspect-ratio: 1/1) {
.index-container {
.header {
height: 280px;
flex: 0 0 280px;
padding: 157px 0 0 0;
.hot-search {
.title {
text-align: center;
}
.row {
display: flex;
justify-content: center;
}
}
}
.content {
.guide {
top: 84px;
width: 339px;
height: 625px;
padding: 528px 0 0 40px;
.top {
height: 500px;
}
}
.rec,
.food {
height: 625px;
top: 84px;
}
.menu {
left: 1068px;
right: 68px;
top: 84px;
}
.acts {
top: 267px;
left: 1068px;
right: 68px;
width: 784px;
height: 442px;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save