Browse Source

fix: 修改轮播底部按钮修改繁体字样

pull/10/head
张耀 3 years ago
parent
commit
cbe0e6ca36
  1. 2
      src/components/Header/Header.vue
  2. 2
      src/components/Map/Map.vue
  3. 16
      src/components/ShopDetail/ShopDetail.vue
  4. 2
      src/components/SwitchTab/SwitchTab.vue
  5. 15
      src/components/TheServiceDetail/TheServiceDetail.vue
  6. 5
      src/components/TypeBtnList/TypeBtnList.vue
  7. 16
      src/router/routes.ts
  8. 17
      src/views/Activity/Activity.vue
  9. 2
      src/views/Index/Index.vue

2
src/components/Header/Header.vue

@ -37,7 +37,7 @@
<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.2845 0L24 1.00072L1.71546 40L0 38.9993L22.2845 0Z" fill="black" fill-opacity="0.2" /> <path d="M22.2845 0L24 1.00072L1.71546 40L0 38.9993L22.2845 0Z" fill="black" fill-opacity="0.2" />
</svg> </svg>
<span>{{ showSearch ? '全局搜索' : route.meta.title }}</span>
<span>{{ showSearch ? '全局搜索' : switchLanguage(route.meta, 'name') }}</span>
</div> </div>
</transition> </transition>
</header> </header>

2
src/components/Map/Map.vue

@ -24,7 +24,7 @@
<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.2845 0L24 1.00072L1.71546 40L0 38.9993L22.2845 0Z" fill="black" fill-opacity="0.2" /> <path d="M22.2845 0L24 1.00072L1.71546 40L0 38.9993L22.2845 0Z" fill="black" fill-opacity="0.2" />
</svg> </svg>
<span>{{ route.meta.title }}</span>
<span>{{ switchLanguage(route.meta, 'name') }}</span>
</div> </div>
</transition> </transition>

16
src/components/ShopDetail/ShopDetail.vue

@ -165,10 +165,10 @@ useStatistics({ tag: 'shop', shopCode: shop.value.shopCode })
background: rgb(255 255 255 / 70%); background: rgb(255 255 255 / 70%);
border-radius: 12px; border-radius: 12px;
--swiper-theme-color: rgb(0 0 0 / 30%);
--swiper-theme-color: #d7ba92;
--swiper-pagination-bullet-width: 28px; --swiper-pagination-bullet-width: 28px;
--swiper-pagination-bullet-height: 4px; --swiper-pagination-bullet-height: 4px;
--swiper-pagination-bullet-inactive-color: #fff;
--swiper-pagination-bullet-inactive-color: rgb(0 0 0 / 60%);
.bg-top { .bg-top {
position: absolute; position: absolute;
@ -186,15 +186,15 @@ useStatistics({ tag: 'shop', shopCode: shop.value.shopCode })
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
width: 800px; width: 800px;
height: 450px;
min-height: 450px;
max-height: 450px;
height: 490px;
// min-height: 450px;
// max-height: 450px;
margin-top: -178px; margin-top: -178px;
margin-left: 25px; margin-left: 25px;
// background: #d5d5d5; // background: #d5d5d5;
background: rgb(255 255 255); background: rgb(255 255 255);
border-radius: 12px; border-radius: 12px;
.swiper-slide {
:deep(.swiper-slide) {
height: 450px; height: 450px;
border-radius: 12px; border-radius: 12px;
} }
@ -214,11 +214,11 @@ useStatistics({ tag: 'shop', shopCode: shop.value.shopCode })
object-fit: scale-down; object-fit: scale-down;
} }
} }
.swiper-pagination-bullet {
:deep(.swiper-pagination-bullet) {
border-radius: 4px; border-radius: 4px;
} }
.detail { .detail {
bottom: -10px;
bottom: 18px;
// left: 87%; // left: 87%;
// width: 100px; // width: 100px;
} }

2
src/components/SwitchTab/SwitchTab.vue

@ -26,7 +26,7 @@
<div class="intro-wrapper"> <div class="intro-wrapper">
<span class="intro-name"> <span class="intro-name">
{{ item.name }}
{{ switchLanguage(item, 'name') }}
</span> </span>
<span class="intro-name-en"> <span class="intro-name-en">
{{ item.en }} {{ item.en }}

15
src/components/TheServiceDetail/TheServiceDetail.vue

@ -133,10 +133,11 @@ function close() {
background: rgb(255 255 255 / 70%); background: rgb(255 255 255 / 70%);
border-radius: 12px 12px 24px 24px; border-radius: 12px 12px 24px 24px;
--swiper-theme-color: rgb(0 0 0 / 30%);
--swiper-theme-color: #d7ba92;
--swiper-pagination-bullet-width: 28px; --swiper-pagination-bullet-width: 28px;
--swiper-pagination-bullet-height: 4px; --swiper-pagination-bullet-height: 4px;
--swiper-pagination-bullet-inactive-color: #fff;
--swiper-pagination-bullet-inactive-color: rgb(0 0 0 / 60%);
.bg-top { .bg-top {
position: absolute; position: absolute;
top: 0; top: 0;
@ -153,15 +154,13 @@ function close() {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
width: 800px; width: 800px;
height: 450px;
min-height: 450px;
max-height: 450px;
height: 490px;
margin-top: -176px; margin-top: -176px;
margin-left: 25px; margin-left: 25px;
// background: #d5d5d5; // background: #d5d5d5;
background: rgb(255 255 255); background: rgb(255 255 255);
border-radius: 12px; border-radius: 12px;
.swiper-slide {
:deep(.swiper-slide) {
height: 450px; height: 450px;
border-radius: 12px; border-radius: 12px;
} }
@ -173,11 +172,11 @@ function close() {
object-fit: cover; object-fit: cover;
border-radius: 12px; border-radius: 12px;
} }
.swiper-pagination-bullet {
:deep(.swiper-pagination-bullet) {
border-radius: 4px; border-radius: 4px;
} }
.detail { .detail {
bottom: -10px;
bottom: 18px;
// left: 87%; // left: 87%;
// width: 100px; // width: 100px;
} }

5
src/components/TypeBtnList/TypeBtnList.vue

@ -78,6 +78,11 @@ function changeType(item: TypeItem, index: number) {
color: rgb(0 0 0 / 80%); color: rgb(0 0 0 / 80%);
border-bottom: 6px solid #d7ba92; border-bottom: 6px solid #d7ba92;
} }
&.btn-en {
h4 {
font-size: 21px;
}
}
} }
} }
} }

16
src/router/routes.ts

@ -13,7 +13,7 @@ export const routes: RouteRecordRaw[] = [
path: '/guide', path: '/guide',
component: () => import(/* webpackChunkName: "guide" */ '@/views/Guide/Guide.vue'), component: () => import(/* webpackChunkName: "guide" */ '@/views/Guide/Guide.vue'),
meta: { meta: {
title: '地图导览',
name: '地图导览',
titleEn: 'MAP\nGUIDE' titleEn: 'MAP\nGUIDE'
} }
}, },
@ -22,7 +22,7 @@ export const routes: RouteRecordRaw[] = [
name: 'Nav', name: 'Nav',
component: () => import(/* webpackChunkName: "nav" */ '@/views/Nav/Nav.vue'), component: () => import(/* webpackChunkName: "nav" */ '@/views/Nav/Nav.vue'),
meta: { meta: {
title: '地图导航',
name: '地图导航',
titleEn: 'MAP\nNAVIGATION' titleEn: 'MAP\nNAVIGATION'
} }
}, },
@ -31,7 +31,7 @@ export const routes: RouteRecordRaw[] = [
name: 'Parking', name: 'Parking',
component: () => import('@/views/Parking/Parking.vue'), component: () => import('@/views/Parking/Parking.vue'),
meta: { meta: {
title: '车位指引',
name: '车位指引',
titleEn: 'PARKING\nGUIDANCE' titleEn: 'PARKING\nGUIDANCE'
} }
}, },
@ -40,7 +40,7 @@ export const routes: RouteRecordRaw[] = [
name: 'Brand', name: 'Brand',
component: () => import('@/views/Brand/Brand.vue'), component: () => import('@/views/Brand/Brand.vue'),
meta: { meta: {
title: '品牌列表',
name: '品牌列表',
titleEn: 'BRAND\nLIST' titleEn: 'BRAND\nLIST'
} }
}, },
@ -49,7 +49,7 @@ export const routes: RouteRecordRaw[] = [
name: 'Building', name: 'Building',
component: () => import('@/views/Building/Building.vue'), component: () => import('@/views/Building/Building.vue'),
meta: { meta: {
title: '楼栋列表',
name: '楼栋列表',
titleEn: 'BLOCK\nLIST' titleEn: 'BLOCK\nLIST'
} }
}, },
@ -58,7 +58,7 @@ export const routes: RouteRecordRaw[] = [
name: 'Activity', name: 'Activity',
component: () => import('@/views/Activity/Activity.vue'), component: () => import('@/views/Activity/Activity.vue'),
meta: { meta: {
title: '社区活动',
name: '社区活动',
titleEn: 'COMUNITY\nACTIVITY' titleEn: 'COMUNITY\nACTIVITY'
} }
}, },
@ -67,7 +67,7 @@ export const routes: RouteRecordRaw[] = [
name: 'Member', name: 'Member',
component: () => import('@/views/Member/Member.vue'), component: () => import('@/views/Member/Member.vue'),
meta: { meta: {
title: '尊享会员',
name: '尊享会员',
titleEn: 'MEMBER\nPRIVILEGES' titleEn: 'MEMBER\nPRIVILEGES'
} }
}, },
@ -76,7 +76,7 @@ export const routes: RouteRecordRaw[] = [
name: 'Service', name: 'Service',
component: () => import('@/views/Service/Service.vue'), component: () => import('@/views/Service/Service.vue'),
meta: { meta: {
title: '社区服务',
name: '社区服务',
titleEn: 'COMMUNITY\nSERVICE' titleEn: 'COMMUNITY\nSERVICE'
} }
}, },

17
src/views/Activity/Activity.vue

@ -41,8 +41,8 @@
<SwiperSlide v-for="(item, index) in actList" :key="index" v-slot="{ isActive }"> <SwiperSlide v-for="(item, index) in actList" :key="index" v-slot="{ isActive }">
<ActivityItem :act-info="item" :is-active="isActive"></ActivityItem> <ActivityItem :act-info="item" :is-active="isActive"></ActivityItem>
</SwiperSlide> </SwiperSlide>
<div class="list-paginationh"></div>
</Swiper> </Swiper>
<div class="list-paginationh"></div>
<img v-if="actList.length === 0" class="no-data" src="@/assets/images/stay_tuned.svg" alt="" /> <img v-if="actList.length === 0" class="no-data" src="@/assets/images/stay_tuned.svg" alt="" />
<!-- <activityDetail v-if="showDetail" @close="showDetail = false"> </activityDetail> --> <!-- <activityDetail v-if="showDetail" @close="showDetail = false"> </activityDetail> -->
@ -129,6 +129,13 @@ getData('mall')
background-size: 1080px 1419px; background-size: 1080px 1419px;
background-color: linear-gradient(180deg, #e2d8ca 0%, rgb(226 216 202 / 0%) 100%); background-color: linear-gradient(180deg, #e2d8ca 0%, rgb(226 216 202 / 0%) 100%);
--swiper-theme-color: #d7ba92;
--swiper-pagination-bullet-width: 28px;
--swiper-pagination-bullet-height: 4px;
--swiper-pagination-bullet-inactive-color: rgb(0 0 0 / 60%);
:deep(.swiper-pagination-bullet) {
border-radius: 4px;
}
.btn-group { .btn-group {
width: 428px; width: 428px;
margin: 420px auto 0; margin: 420px auto 0;
@ -150,6 +157,14 @@ getData('mall')
} }
} }
} }
.list-paginationh {
position: absolute;
right: 0;
bottom: 111px;
left: 0;
width: fit-content;
margin: 0 auto;
}
.no-data { .no-data {
position: absolute; position: absolute;
right: 0; right: 0;

2
src/views/Index/Index.vue

@ -7,7 +7,7 @@
<ul class="ul-container"> <ul class="ul-container">
<li v-for="(item, index) in btnModel" :key="index" class="btn-item" @click="itemClick(item)"> <li v-for="(item, index) in btnModel" :key="index" class="btn-item" @click="itemClick(item)">
<div class="div" :style="getBg(item)"></div> <div class="div" :style="getBg(item)"></div>
<p class="btn-name">{{ item.name }}</p>
<p class="btn-name">{{ switchLanguage(item, 'name') }}</p>
<p class="btn-nameen">{{ item.nameEn }}</p> <p class="btn-nameen">{{ item.nameEn }}</p>
</li> </li>
</ul> </ul>

Loading…
Cancel
Save