|
|
@@ -1,15 +1,11 @@
|
|
|
<template>
|
|
|
<div
|
|
|
class="relic-list"
|
|
|
- :class="[`type-${$route.query.themeIdx}`]"
|
|
|
>
|
|
|
<button
|
|
|
class="return"
|
|
|
@click="router.push({
|
|
|
name: 'UnitList',
|
|
|
- query: {
|
|
|
- themeIdx: route.query.themeIdx,
|
|
|
- }
|
|
|
})"
|
|
|
/>
|
|
|
<div
|
|
|
@@ -25,7 +21,7 @@
|
|
|
}"
|
|
|
@click="onClickTabItem(idx)"
|
|
|
>
|
|
|
- {{ item.label }}
|
|
|
+ {{ int2zh(idx + 1) }} {{ item.label }}
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="splitter" />
|
|
|
@@ -40,16 +36,14 @@
|
|
|
@click="router.push({
|
|
|
name:'RelicDetail',
|
|
|
query: {
|
|
|
- themeIdx: route.query.themeIdx,
|
|
|
unitIdx: route.query.unitIdx,
|
|
|
relicIdx: idx,
|
|
|
}
|
|
|
})"
|
|
|
>
|
|
|
- <!-- https://houseoss.4dkankan.com/project/yzdyh-h5/monument/beituo/1/0.png -->
|
|
|
<img
|
|
|
class="cover"
|
|
|
- :src="'https://houseoss.4dkankan.com/project/yzdyh-h5/monument/' + item.imgs[0]"
|
|
|
+ :src="'https://houseoss.4dkankan.com/project/yzdyh-h5/book-fair/' + item.imgs[0]"
|
|
|
alt=""
|
|
|
draggable="false"
|
|
|
>
|
|
|
@@ -73,6 +67,7 @@
|
|
|
import { useRoute, useRouter } from "vue-router"
|
|
|
import { ref, computed } from "vue"
|
|
|
import { useStore } from "vuex"
|
|
|
+import { numberToWords } from "pixiu-number-toolkit"
|
|
|
|
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
|
@@ -96,11 +91,14 @@ function onClickTabItem(idx) {
|
|
|
router.push({
|
|
|
name: route.name,
|
|
|
query: {
|
|
|
- themeIdx: route.query.themeIdx,
|
|
|
unitIdx: idx,
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
+function int2zh(idx) {
|
|
|
+ return numberToWords(idx, "zh")
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -117,125 +115,67 @@ function onClickTabItem(idx) {
|
|
|
align-items: center;
|
|
|
>button.return{
|
|
|
position: absolute;
|
|
|
- top: 47px;
|
|
|
- left: 60px;
|
|
|
- width: 64px;
|
|
|
- height: 64px;
|
|
|
+ top: 40px;
|
|
|
+ left: 53px;
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
background-image: url(@/assets/images/btn-return.png);
|
|
|
background-size: contain;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center center;
|
|
|
}
|
|
|
>.tabbar{
|
|
|
+ padding-left: 110px;
|
|
|
+ padding-right: 110px;
|
|
|
flex: 0 0 auto;
|
|
|
max-width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 50px;
|
|
|
+ gap: 93px;
|
|
|
overflow: auto;
|
|
|
&::-webkit-scrollbar { height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
|
|
|
+
|
|
|
>button{
|
|
|
+
|
|
|
+ position: relative;
|
|
|
flex: 0 0 auto;
|
|
|
- width: 180px;
|
|
|
- height: 70px;
|
|
|
- background-image: url(@/assets/images/tab-item-normal.png);
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
font-size: 24px;
|
|
|
font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
|
|
|
font-weight: 400;
|
|
|
- color: #7F0007;
|
|
|
+ color: #48768D;
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
>button.active{
|
|
|
- background-image: url(@/assets/images/tab-item-active.png);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- >.splitter{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- >ul.relic-ul{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 70px;
|
|
|
- overflow: auto;
|
|
|
- padding-bottom: 40px;
|
|
|
- padding-left: 95px;
|
|
|
- padding-right: 95px;
|
|
|
- &::-webkit-scrollbar { height: 8px;}
|
|
|
- &::-webkit-scrollbar-thumb { background: rgba(186, 172, 153, 1); border-radius: 4px; }
|
|
|
- >li{
|
|
|
- flex: 0 0 auto;
|
|
|
- width: 473px;
|
|
|
- height: 63.17vh;
|
|
|
- cursor: pointer;
|
|
|
- &:hover{
|
|
|
- box-shadow: 6px 6px 10px 0px rgba(65,42,18,0.75);
|
|
|
- }
|
|
|
- >img{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 141px);
|
|
|
- object-fit: cover;
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ left: -6px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-100%, -60%);
|
|
|
+ width: 50px;
|
|
|
+ height: 18px;
|
|
|
+ background-image: url(@/assets/images/tab-deco-left.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
}
|
|
|
- >.not-img{
|
|
|
- height: 141px;
|
|
|
- overflow: hidden;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- >h3{
|
|
|
- font-size: 32px;
|
|
|
- font-family: Source Han Serif CN-Bold, Source Han Serif CN;
|
|
|
- font-weight: bold;
|
|
|
- color: #404036;
|
|
|
- overflow: hidden;
|
|
|
- white-space: pre;
|
|
|
- text-overflow: ellipsis;
|
|
|
- margin-top: 28px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- >.desc{
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 20px;
|
|
|
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
- font-weight: 400;
|
|
|
- color: #404036;
|
|
|
- line-height: 28px;
|
|
|
- }
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ right: -6px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(100%, -60%);
|
|
|
+ width: 50px;
|
|
|
+ height: 18px;
|
|
|
+ background-image: url(@/assets/images/tab-deco-right.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.relic-list.type-1{
|
|
|
- background-image: url(@/assets/images/relic-list-bg-1.jpg);
|
|
|
- >button.return{
|
|
|
- width: 92px;
|
|
|
- height: 92px;
|
|
|
- background-image: url(@/assets/images/btn-return-1.png);
|
|
|
- }
|
|
|
- >.tabbar{
|
|
|
- gap: 50px;
|
|
|
- &::-webkit-scrollbar {} /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
|
|
|
- >button{
|
|
|
- flex: 0 0 auto;
|
|
|
- width: 180px;
|
|
|
- height: 70px;
|
|
|
- background-image: url(@/assets/images/tab-item-normal.png);
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- color: #48768D;
|
|
|
- }
|
|
|
- >button.active{
|
|
|
- background-image: url(@/assets/images/tab-item-active.png);
|
|
|
- }
|
|
|
- }
|
|
|
>.splitter{
|
|
|
display: initial;
|
|
|
width: calc(1794 / 1920 * 100vw);
|
|
|
@@ -252,19 +192,19 @@ function onClickTabItem(idx) {
|
|
|
padding-left: 95px;
|
|
|
padding-right: 95px;
|
|
|
&::-webkit-scrollbar { height: 8px;}
|
|
|
- &::-webkit-scrollbar-thumb { background: rgba(186, 172, 153, 1); border-radius: 4px; }
|
|
|
+ &::-webkit-scrollbar-thumb { background: rgba(138, 168, 204, 1); border-radius: 4px; }
|
|
|
>li{
|
|
|
+ font-size: 0;
|
|
|
flex: 0 0 auto;
|
|
|
width: 473px;
|
|
|
height: 63.17vh;
|
|
|
cursor: pointer;
|
|
|
- &:hover{
|
|
|
- box-shadow: 6px 6px 10px 0px rgba(65,42,18,0.75);
|
|
|
- }
|
|
|
>img{
|
|
|
width: 100%;
|
|
|
height: calc(100% - 141px);
|
|
|
object-fit: cover;
|
|
|
+ background-color: #fff;
|
|
|
+ object-fit: contain;
|
|
|
}
|
|
|
>.not-img{
|
|
|
height: 141px;
|
|
|
@@ -275,7 +215,7 @@ function onClickTabItem(idx) {
|
|
|
font-size: 32px;
|
|
|
font-family: Source Han Serif CN-Bold, Source Han Serif CN;
|
|
|
font-weight: bold;
|
|
|
- color: #404036;
|
|
|
+ color: #48768D;
|
|
|
overflow: hidden;
|
|
|
white-space: pre;
|
|
|
text-overflow: ellipsis;
|
|
|
@@ -290,10 +230,22 @@ function onClickTabItem(idx) {
|
|
|
font-size: 20px;
|
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
- color: #404036;
|
|
|
+ color: #48768D;
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
}
|
|
|
+ &:hover{
|
|
|
+ box-shadow: 6px 6px 14px 0px rgba(57,106,168,0.25);
|
|
|
+ >img{
|
|
|
+ }
|
|
|
+ >.not-img{
|
|
|
+ background-color: #fff;
|
|
|
+ >h3{
|
|
|
+ }
|
|
|
+ >.desc{
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
任一存
