123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960 |
- <template>
- <div
- class="home"
- >
- <div class="left">
- <div class="title">
- <h2>其他遗存</h2>
- <div class="deco-line-1" />
- <div class="deco-line-2" />
- </div>
- <ul>
- <li
- v-for="item in otherRelicList"
- :key="item.id"
- @click="activeOtherRelicData = item, isShowOtherRelicDetail = true"
- >
- <img
- class=""
- :src="`${$env.VUE_APP_DEPLOY_ORIGIN}${item.thumb}`"
- alt=""
- draggable="false"
- >
- <div class="right">
- <div class="name">
- {{ item.name }}
- </div>
- <div class="desc">
- {{ item.description }}
- </div>
- </div>
- </li>
- </ul>
- </div>
- <div
- ref="centerRef"
- class="center"
- >
- <div
- class="img-list-wrap"
- :style="{
- width: imgWrapSize + 'px',
- height: imgWrapSize + 'px',
- }"
- >
- <img
- v-for="(item, idx) in hotRelicList"
- v-show="activeAreaIdx === -1 || areaList[activeAreaIdx] === item.belongArea"
- :key="item.name + '-pos-in-map'"
- class="pos-in-map"
- :class="{
- active: activeHotRelicIdx === idx,
- }"
- :src="activeHotRelicIdx !== idx ? require('@/assets/images/icon_pos_in_map.png') : require('@/assets/images/icon_pos_in_map-active.png')"
- alt=""
- draggable="false"
- :style="{
- left: item.xInMap,
- top: item.yInMap,
- }"
- @click="activeHotRelicIdx = idx"
- >
- <img
- v-for="(item, idx) in hotRelicList"
- v-show="(activeAreaIdx === -1 || areaList[activeAreaIdx] === item.belongArea) && (idx !== activeHotRelicIdx)"
- :key="item.name + '-no-color'"
- class="no-color"
- :src="require(`@/assets/images/relic-drawings/${item.imgName}.png`)"
- alt=""
- draggable="false"
- :style="{
- left: `${(item.x + item.widthNoColor / 2) / 734 * 100}%`,
- top: `${(item.y + item.heightNoColor / 2) / 734 * 100}%`,
- width: `${item.widthNoColor / 734 * 100}%`,
- height: `${item.heightNoColor / 734 * 100}%`,
- }"
- @click="activeHotRelicIdx = idx"
- >
- <img
- v-for="(item, idx) in hotRelicList"
- v-show="(activeAreaIdx === -1 || areaList[activeAreaIdx] === item.belongArea) && (idx === activeHotRelicIdx)"
- :key="item.name + 'colorful'"
- class="colorful"
- :src="require(`@/assets/images/relic-drawings/${item.imgName}上色.png`)"
- alt=""
- draggable="false"
- :style="{
- left: `${(item.x + item.widthNoColor / 2) / 734 * 100}%`,
- top: `${(item.y + item.heightNoColor / 2) / 734 * 100}%`,
- width: `${item.widthColorful / 734 * 100}%`,
- height: `${item.heightColorful / 734 * 100}%`,
- }"
- >
- </div>
- </div>
- <div class="right">
- <div
- class="relic-detail"
- >
- <div class="top-bar">
- <h3 :title="activeHotRelicDetail?.name">
- {{ activeHotRelicDetail?.name }}
- </h3>
- <div class="btn-wrap">
- <!-- <button class="pano"/> -->
- <button
- class="vr"
- @click="onClickHotRelicSceneEntry"
- />
- </div>
- </div>
- <div class="splitter" />
- <div class="text">
- {{ activeHotRelicDetail?.description }}
- </div>
- <img
- class=""
- :src="`${$env.VUE_APP_DEPLOY_ORIGIN}${activeHotRelicDetail?.thumb}`"
- alt=""
- draggable="false"
- >
- </div>
- <div class="relic-detail-shadow" />
- <menu
- class="area-list"
- :class="{
- hide: !isShowAreaList
- }"
- >
- <button
- v-for="(item, idx) in areaList"
- :key="idx"
- :class="{
- active: idx === activeAreaIdx,
- }"
- @click="onClickArea(idx)"
- >
- {{ item }}
- </button>
- </menu>
- <button
- class="area-list-switch"
- :class="{
- active: isShowAreaList
- }"
- @click="isShowAreaList = !isShowAreaList"
- >
- 分类
- <img
- class=""
- src="@/assets/images/icon_arrow-half.png"
- alt=""
- draggable="false"
- >
- </button>
- <button
- class="search"
- @click="isShowRelicSearch = true"
- >
- 搜索
- <img
- class=""
- src="@/assets/images/icon_search.png"
- alt=""
- draggable="false"
- >
- </button>
- </div>
- <img
- class="decoration-bottom"
- src="@/assets/images/home-bottom-bg.png"
- alt=""
- draggable="false"
- >
- <button
- class="arrow-down"
- @click="router.push({
- name: 'CityOfXishan',
- })"
- />
- <OtherRelicDetail
- v-if="isShowOtherRelicDetail"
- :data="activeOtherRelicData"
- @close="isShowOtherRelicDetail = false, activeOtherRelicData = {}"
- />
- <RelicSearch
- v-if="isShowRelicSearch"
- @close="onSearchViewClose"
- />
- <IframeWrap
- v-if="isShowIframeWrap"
- :url="iframeUrl"
- @back="isShowIframeWrap = false, iframeUrl = ''"
- />
- </div>
- </template>
- <script setup>
- import { ref, computed, watch, onMounted, watchEffect, inject } from "vue"
- import { useRoute, useRouter } from "vue-router"
- import { useStore } from "vuex"
- import { useElementSize } from '@vueuse/core'
- import OtherRelicDetail from '@/components/OtherRelicDetail.vue'
- import RelicSearch from '@/components/RelicSearch.vue'
- import IframeWrap from '@/components/IframeWrap.vue'
- import { getRelicList } from '@/api.js'
- const route = useRoute()
- const router = useRouter()
- const store = useStore()
- const $env = inject('$env')
- // 运营埋点
- store.dispatch('recordPageVisitIfNeeded', {
- pageId: 1,
- })
- const otherRelicList = ref([])
- getRelicList().then((res) => {
- otherRelicList.value = res
- })
- const isShowOtherRelicDetail = ref(false)
- const activeOtherRelicData = ref({})
- const centerRef = ref(null)
- const { width: centerWidth, height: centerHeight } = useElementSize(centerRef)
- const imgWrapSize = ref(0)
- watchEffect(() => {
- if (centerHeight.value - window.innerHeight * 0.1 < 0) {
- return
- }
- if (centerWidth.value > (centerHeight.value - window.innerHeight * 0.1)) {
- imgWrapSize.value = centerHeight.value - window.innerHeight * 0.1
- } else {
- imgWrapSize.value = centerWidth.value
- }
- })
- const hotRelicList = ref([
- {
- x: 634,
- y: 305,
- widthNoColor: 129,
- heightNoColor: 81,
- widthColorful: 169,
- heightColorful: 101,
- imgName: '6竺西书院',
- photoName: '6竺西书院.jpg',
- xInMap: '45.7%',
- yInMap: '55%',
- belongArea: '宜兴市',
- name: '竺西书院',
- },
- {
- x: 651,
- y: 391,
- widthNoColor: 84,
- heightNoColor: 48,
- widthColorful: 84,
- heightColorful: 48,
- imgName: '14宝界桥',
- photoName: '14宝界桥.webp',
- xInMap: '58.5%',
- yInMap: '47%',
- belongArea: '滨湖区',
- name: '宝界桥',
- },
- {
- x: 619,
- y: 428,
- widthNoColor: 52,
- heightNoColor: 72,
- widthColorful: 52,
- heightColorful: 72,
- imgName: '9祝大椿故居',
- photoName: '9祝大椿故居.webp',
- xInMap: '62%',
- yInMap: '47%',
- belongArea: '梁溪区',
- name: '祝大椿故居',
- },
- {
- x: 620,
- y: 516,
- widthNoColor: 90,
- heightNoColor: 36,
- widthColorful: 94,
- heightColorful: 64,
- imgName: '3尚仁初级商科职业学校',
- photoName: '3尚仁初级商科职业学校.webp',
- xInMap: '60.5%',
- yInMap: '27.5%',
- belongArea: '江阴市',
- name: '尚仁初级商科职业学校',
- },
- {
- x: 562,
- y: 540,
- widthNoColor: 78,
- heightNoColor: 66,
- widthColorful: 82,
- heightColorful: 66,
- imgName: '23怀海义庄',
- photoName: '23怀海义庄上色.webp',
- xInMap: '71%',
- yInMap: '50%',
- belongArea: '新吴区',
- name: '怀海义庄',
- },
- {
- x: 504,
- y: 587,
- widthNoColor: 48,
- heightNoColor: 87,
- widthColorful: 63,
- heightColorful: 87,
- imgName: '7坎宫救熄会',
- photoName: '7坎宫救熄会.jpg',
- xInMap: '61%',
- yInMap: '47.5%',
- belongArea: '梁溪区',
- name: '坎宫救熄会',
- },
- {
- x: 397,
- y: 644,
- widthNoColor: 88,
- heightNoColor: 54,
- widthColorful: 97,
- heightColorful: 54,
- imgName: '13大公图书馆',
- photoName: '13大公图书馆.jpg',
- xInMap: '57.5%',
- yInMap: '45%',
- belongArea: '滨湖区',
- name: '大公图书馆',
- },
- {
- x: 314,
- y: 630,
- widthNoColor: 65,
- heightNoColor: 83,
- widthColorful: 66,
- heightColorful: 86,
- imgName: '11惠山古镇',
- photoName: '11惠山古镇.png',
- xInMap: '60%',
- yInMap: '43.5%',
- belongArea: '梁溪区',
- name: '慈善大讲堂(惠山古镇)',
- },
- {
- x: 211,
- y: 636,
- widthNoColor: 87,
- heightNoColor: 49,
- widthColorful: 112,
- heightColorful: 73,
- imgName: '4善卷洞',
- photoName: '4善卷洞.webp',
- xInMap: '27.5%',
- yInMap: '63%',
- belongArea: '宜兴市',
- name: '善卷洞',
- },
- {
- x: 140,
- y: 597,
- widthNoColor: 52,
- heightNoColor: 68,
- widthColorful: 54,
- heightColorful: 70,
- imgName: '19徐氏义庄(查桥)',
- photoName: '19徐氏义庄(查桥).jpg',
- xInMap: '65.5%',
- yInMap: '43%',
- belongArea: '锡山区',
- name: '徐氏义庄(查桥)',
- },
- {
- x: 27,
- y: 547,
- widthNoColor: 109,
- heightNoColor: 53,
- widthColorful: 109,
- heightColorful: 72,
- imgName: '16华氏老义庄',
- photoName: '16华氏老义庄.webp',
- xInMap: '75.5%',
- yInMap: '48%',
- belongArea: '锡山区',
- name: '华氏老义庄',
- },
- {
- x: 47,
- y: 473,
- widthNoColor: 50,
- heightNoColor: 68,
- widthColorful: 79,
- heightColorful: 88,
- imgName: '21李金镛故居',
- photoName: '21李金镛故居.webp',
- xInMap: '58.5%',
- yInMap: '39%',
- belongArea: '惠山区',
- name: '李金镛故居',
- },
- {
- x: -9,
- y: 385,
- widthNoColor: 97,
- heightNoColor: 75,
- widthColorful: 99,
- heightColorful: 78,
- imgName: '8公花园',
- photoName: '8公花园.jpg',
- xInMap: '60.5%',
- yInMap: '45%',
- belongArea: '梁溪区',
- name: '公花园',
- },
- {
- x: -32,
- y: 334,
- widthNoColor: 129,
- heightNoColor: 37,
- widthColorful: 133,
- heightColorful: 73,
- imgName: '20唐氏花厅',
- photoName: '20唐氏花厅.png',
- xInMap: '73%',
- yInMap: '42%',
- belongArea: '锡山区',
- name: '唐氏花厅',
- },
- {
- x: 8,
- y: 248,
- widthNoColor: 85,
- heightNoColor: 61,
- widthColorful: 85,
- heightColorful: 61,
- imgName: '12市慈善总会',
- photoName: '12市慈善总会.jpg',
- xInMap: '59%',
- yInMap: '43.5%',
- belongArea: '梁溪区',
- name: '慈善展示馆(市慈善总会)',
- },
- {
- x: 59,
- y: 204,
- widthNoColor: 56,
- heightNoColor: 49,
- widthColorful: 68,
- heightColorful: 60,
- imgName: '5洑溪徐氏宗祠(现名:徐大宗祠)',
- photoName: '5洑溪徐氏宗祠(现名:徐大宗祠).png',
- xInMap: '32%',
- yInMap: '60%',
- belongArea: '宜兴区',
- name: '洑溪徐氏宗祠(现名:徐大宗祠)',
- },
- {
- x: 65,
- y: 136,
- widthNoColor: 95,
- heightNoColor: 47,
- widthColorful: 95,
- heightColorful: 52,
- imgName: '110匡村中学旧址',
- photoName: '110匡村中学旧址.png',
- xInMap: '53%',
- yInMap: '40%',
- belongArea: '惠山区',
- name: '匡园(匡村中学旧址)',
- },
- {
- x: 141,
- y: 83,
- widthNoColor: 74,
- heightNoColor: 56,
- widthColorful: 91,
- heightColorful: 70,
- imgName: '15钱伟长旧居',
- photoName: '15钱伟长旧居.jpg',
- xInMap: '74.5%',
- yInMap: '47%',
- belongArea: '锡山区',
- name: '钱伟长旧居',
- },
- {
- x: 202,
- y: 54,
- widthNoColor: 72,
- heightNoColor: 42,
- widthColorful: 72,
- heightColorful: 53,
- imgName: '18徐义庄(荡口)',
- photoName: '18徐义庄(荡口).jpg',
- xInMap: '74%',
- yInMap: '46.5%',
- belongArea: '锡山区',
- name: '徐义庄(荡口)',
- },
- {
- x: 282,
- y: 27,
- widthNoColor: 51,
- heightNoColor: 57,
- widthColorful: 68,
- heightColorful: 61,
- imgName: '109景云楼',
- photoName: '109景云楼.png',
- xInMap: '71%',
- yInMap: '26%',
- belongArea: '江阴市',
- name: '景云楼',
- },
- {
- x: 343,
- y: 49,
- widthNoColor: 67,
- heightNoColor: 40,
- widthColorful: 67,
- heightColorful: 41,
- imgName: '108炎黄陈列馆',
- photoName: '108炎黄陈列馆上色.webp',
- xInMap: '68%',
- yInMap: '32%',
- belongArea: '江阴市',
- name: '炎黄陈列馆',
- },
- {
- x: 427,
- y: 36,
- widthNoColor: 60,
- heightNoColor: 61,
- widthColorful: 61,
- heightColorful: 61,
- imgName: '22村前公立蒙学堂',
- photoName: '22村前公立蒙学堂.png',
- xInMap: '60%',
- yInMap: '36.5%',
- belongArea: '惠山区',
- name: '村前公立蒙学堂',
- },
- {
- x: 492,
- y: 80,
- widthNoColor: 86,
- heightNoColor: 86,
- widthColorful: 86,
- heightColorful: 86,
- imgName: '24周新镇',
- photoName: '24周新镇.jpg',
- xInMap: '60.5%',
- yInMap: '50%',
- belongArea: '经开区',
- name: '周新镇',
- },
- {
- x: 553,
- y: 137,
- widthNoColor: 109,
- heightNoColor: 40,
- widthColorful: 109,
- heightColorful: 72,
- imgName: '17襄义庄',
- photoName: '17襄义庄.jpg',
- xInMap: '74%',
- yInMap: '49%',
- belongArea: '锡山区',
- name: '襄义庄',
- },
- {
- x: 603,
- y: 186,
- widthNoColor: 53,
- heightNoColor: 68,
- widthColorful: 56,
- heightColorful: 71,
- imgName: '10施子祠',
- photoName: '10施子祠.webp',
- xInMap: '59%',
- yInMap: '43.5%',
- belongArea: '梁溪区',
- name: '慈善展示馆(惠山古镇施子祠)',
- },
- {
- x: 655,
- y: 238,
- widthNoColor: 80,
- heightNoColor: 56,
- widthColorful: 80,
- heightColorful: 56,
- imgName: '1缪氏义庄',
- photoName: '1缪氏义庄.jpg',
- xInMap: '71%',
- yInMap: '31%',
- belongArea: '江阴市',
- name: '缪氏义庄',
- },
- ])
- const activeHotRelicIdx = ref(0)
- const activeHotRelicDetail = ref(null)
- watch(activeHotRelicIdx, (v) => {
- getRelicList(hotRelicList.value[v].name).then((res) => {
- activeHotRelicDetail.value = res[0]
- })
- }, {
- immediate: true,
- })
- function onClickHotRelicSceneEntry() {
- // 运营埋点
- store.dispatch('recordPageVisitIfNeeded', {
- pageId: activeHotRelicDetail.value.id,
- })
- iframeUrl.value = activeHotRelicDetail.value?.link, isShowIframeWrap.value = true
- }
- const isShowAreaList = ref(true)
- const areaList = ref([
- '江阴市',
- '宜兴市',
- '梁溪区',
- '锡山区',
- '惠山区',
- '滨湖区',
- '新吴区',
- '经开区'
- ])
- const activeAreaIdx = ref(-1)
- function onClickArea(idx) {
- if (activeAreaIdx.value === idx) {
- activeAreaIdx.value = -1
- } else {
- activeAreaIdx.value = idx
- if (activeHotRelicDetail.value.region !== areaList.value[activeAreaIdx.value]) {
- activeHotRelicIdx.value = hotRelicList.value.findIndex((item) => {
- return item.belongArea === areaList.value[activeAreaIdx.value]
- })
- }
- }
- }
- const isShowRelicSearch = ref(false)
- function onSearchViewClose(relicData) {
- isShowRelicSearch.value = false
- if (relicData) {
- activeOtherRelicData.value = relicData
- isShowOtherRelicDetail.value = true
- }
- }
- const isShowIframeWrap = ref(false)
- const iframeUrl = ref('')
- </script>
- <style lang="less" scoped>
- .home {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: space-evenly;
- >.left{
- flex: 0 0 auto;
- width: 370px;
- display: flex;
- flex-direction: column;
- padding-top: 5vh;
- padding-bottom: 11vh;
- position: relative;
- z-index: 1;
- >.title{
- flex: 0 0 auto;
- margin-bottom: 22px;
- >h2{
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 24px;
- color: #589498;
- line-height: 28px;
- margin-bottom: 4px;
- }
- >.deco-line-1{
- height: 2px;
- width: 67px;
- background: #589498;
- }
- >.deco-line-2{
- height: 2px;
- background: linear-gradient( 90deg, #589498 0%, rgba(88,148,152,0) 100%);
- }
- }
- >ul{
- flex: 1 0 1px;
- overflow: auto;
- padding-right: 22px;
- &::-webkit-scrollbar { background: transparent; width: 2px; height: 0; }
- &::-webkit-scrollbar-thumb { background: #589498; opacity: 0.5; }
- >li{
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 29px;
- cursor: pointer;
- >img{
- flex: 0 0 auto;
- width: 39px;
- height: 39px;
- box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.25);
- border-radius: 50%;
- border: 2px solid #FFFFFF;
- margin-right: 13px;
- }
- >.right{
- flex: 0 0 auto;
- width: 300px;
- >.name{
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 16px;
- color: #589498;
- line-height: 19px;
- overflow: hidden;
- white-space: pre;
- text-overflow: ellipsis;
- }
- >.desc{
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #589498;
- line-height: 16px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- }
- }
- }
- >.center{
- flex: 1 1 auto;
- min-width: 300px;
- max-width: 800px;
- padding-bottom: 10vh;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- z-index: 1;
- >.img-list-wrap{
- background-image: url(@/assets/images/home-center-img-wrap-bg.png);
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center center;
- position: relative;
- >img.pos-in-map{
- position: absolute;
- transform: translate(-50%, -50%);
- width: calc(15 / 734 * 100%);
- height: calc(22 / 734 * 100%);
- transform-origin: center bottom;
- cursor: pointer;
- &.active{
- transform: translate(-50%, -50%) scale(1.5);
- z-index: 1;
- }
- }
- >img.no-color{
- position: absolute;
- width: 100%;
- height: 100%;
- opacity: 0.3;
- transform: translate(-50%, -50%);
- cursor: pointer;
- }
- >img.colorful{
- position: absolute;
- width: 100%;
- height: 100%;
- transform: translate(-50%, -50%);
- }
- }
- }
- >.right{
- flex: 0 0 auto;
- width: 420px;
- padding-top: 5vh;
- padding-bottom: 18vh;
- position: relative;
- z-index: 1;
- >.relic-detail{
- position: relative;
- width: 406px;
- height: 375px;
- background: #ddebe9;
- border-radius: 10px 0 10px 0;
- z-index: 1;
- padding: 18px 26px 16px 26px;
- margin-bottom: 5vh;
- >.top-bar{
- display: flex;
- justify-content: space-between;
- align-items: center;
- >h3{
- width: calc(100% - 80px);
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- color: #589498;
- line-height: 23px;
- overflow: hidden;
- white-space: pre;
- text-overflow: ellipsis;
- }
- >.btn-wrap{
- >button.pano{
- width: 33px;
- height: 33px;
- margin-right: 11px;
- background-image: url(@/assets/images/icon_panorama.png);
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- }
- >button.vr{
- width: 33px;
- height: 33px;
- background-image: url(@/assets/images/icon_vr.png);
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- }
- }
- }
- >.splitter{
- margin-top: 13px;
- margin-bottom: 13px;
- border-bottom: 1px dashed #589498;
- }
- >.text{
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #589498;
- line-height: 20px;
- text-indent: 2em;
- height: 91px;
- overflow: auto;
- padding-right: 0.5em;
- margin-bottom: 10px;
- &::-webkit-scrollbar { background: transparent; width: 2px; height: 0; }
- &::-webkit-scrollbar-thumb { background: #589498; opacity: 0.5; }
- }
- >img{
- width: 351px;
- height: 175px;
- object-fit: cover;
- }
- }
- >.relic-detail-shadow{
- position: absolute;
- top: calc(5vh + 12px);
- left: 12px;
- width: 406px;
- height: 375px;
- border-radius: 10px 0 10px 0;
- border: 1px solid #FFFFFF;
- z-index: 0;
- }
- >menu.area-list{
- margin-bottom: 2vh;
- width: 384px;
- margin-left: auto;
- &.hide{
- opacity: 0;
- pointer-events: none;
- }
- >button{
- margin-left: 10px;
- margin-bottom: 10px;
- width: 86px;
- height: 39px;
- border-radius: 53px 53px 53px 53px;
- border: 1px solid #589498;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #589498;
- line-height: 16px;
- &.active{
- color: #fff;
- background-color: #589498;
- }
- }
- }
- >button.search, button.area-list-switch{
- display: block;
- width: 375px;
- height: 67px;
- margin-left: auto;
- margin-bottom: 2vh;
- border: 1px solid;
- border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(88, 148, 152, 1)) 1 1;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- color: #589498;
- line-height: 23px;
- &.active{
- background: linear-gradient( 90deg, rgba(88,148,152,0) 0%, #589498 100%);
- border: none;
- font-weight: bold;
- color: #FFFFFF;
- }
- >img{
- width: 20px;
- margin-left: 12px;
- margin-right: 24px;
- }
- }
- }
- >.decoration-bottom{
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 26%;
- object-fit: cover;
- object-position: center top;
- pointer-events: none;
- }
- >.arrow-down{
- position: absolute;
- left: 50%;
- bottom: 12px;
- transform: translate(-50%, 0);
- width: 50px;
- height: 50px;
- background-image: url(@/assets/images/icon_arrow-down.png);
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- z-index: 5;
- }
- }
- </style>
|