|
|
@@ -1,51 +1,58 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
- <div class="home">
|
|
|
- <div class="title">万物墙</div>
|
|
|
- <div class="en-title">4DWall</div>
|
|
|
+ <div class="home" @click="showSwitch = false">
|
|
|
+ <input type="file" @change="readFile" accept=".xlsx" />
|
|
|
+ <div class="title"></div>
|
|
|
<template v-if="currentData">
|
|
|
- <div class="swiper-dom swiper-container">
|
|
|
+ <div class="swiper-dom swiper-container" v-if="currentData.list[0] && currentData.list[0].length">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide" v-for="i in currentData.list[0]">
|
|
|
<div class="item-box" @click="changeIframe(i)">
|
|
|
- <img :src="`resource/img/${i.src}`" alt="" />
|
|
|
+ <img :src="`resource/img/${i.thumb ? i.thumb : '1.png'}`" alt="" />
|
|
|
<span class="item-name">{{ i.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-dom swiper-container1" dir="rtl">
|
|
|
+ <div class="swiper-dom swiper-container1" dir="rtl" v-if="currentData?.list[1] && currentData?.list[1].length">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide" v-for="i in currentData.list[1]">
|
|
|
<div class="item-box" @click="changeIframe(i)">
|
|
|
- <img :src="`resource/img/${i.src}`" alt="" />
|
|
|
+ <img :src="`resource/img/${i.thumb ? i.thumb : '1.png'}`" alt="" />
|
|
|
<span class="item-name">{{ i.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="swiper-dom swiper-container2">
|
|
|
+ <div class="swiper-dom swiper-container2" v-if="currentData?.list[2] && currentData?.list[2].length">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide" v-for="i in currentData.list[2]">
|
|
|
<div class="item-box" @click="changeIframe(i)">
|
|
|
- <img :src="`resource/img/${i.src}`" alt="" />
|
|
|
+ <img :src="`resource/img/${i.thumb ? i.thumb : '1.png'}`" alt="" />
|
|
|
<span class="item-name">{{ i.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
- <div class="switch" v-if="currentData">
|
|
|
- <div class="current-item" @click="showSwitch = !showSwitch">
|
|
|
- <span>{{ currentData.name }}</span>
|
|
|
- <div class="arrow"></div>
|
|
|
- </div>
|
|
|
- <div class="switch-list" :class="{ open: showSwitch }">
|
|
|
- <div class="switch-item" @click="changeItem(i)" v-for="(i, index) in swiperData">
|
|
|
- <span>{{ i.name }}</span>
|
|
|
+ <div class="bottom-controls" @click.stop="" v-if="currentData">
|
|
|
+ <div class="switch">
|
|
|
+ <div class="current-item" @click="showSwitch = !showSwitch">
|
|
|
+ <span>{{ currentData.name }}</span>
|
|
|
+ <div class="arrow"></div>
|
|
|
+ </div>
|
|
|
+ <div class="switch-list" :class="{ open: showSwitch }">
|
|
|
+ <div class="scroll-box">
|
|
|
+ <div class="switch-item" :class="{ active: currentData.name == '全部' }" @click="changeItem('all')">
|
|
|
+ <span>全部</span>
|
|
|
+ </div>
|
|
|
+ <div class="switch-item" :class="{ active: currentData.name == i.name }" @click="changeItem(i, index)" v-for="(i, index) in swiperData">
|
|
|
+ <span>{{ i.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="more-btn" @click="goMore()"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<iframeView v-if="showIframe" :iframeData="iframeData" @close="closeIframe" />
|
|
|
@@ -55,7 +62,118 @@
|
|
|
import iframeView from "./iframeView/index.vue";
|
|
|
import "swiper/css/swiper.css";
|
|
|
import Swiper from "swiper";
|
|
|
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from "vue";
|
|
|
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, watch } from "vue";
|
|
|
+import * as XLSX from "xlsx";
|
|
|
+const readFile = (e) => {
|
|
|
+ const files = e.target.files;
|
|
|
+ // 如果没有文件名
|
|
|
+ if (files.length <= 0) {
|
|
|
+ return false;
|
|
|
+ } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
|
|
|
+ this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const fileReader = new FileReader();
|
|
|
+ fileReader.onload = (ev) => {
|
|
|
+ try {
|
|
|
+ const data = ev.target.result;
|
|
|
+ // 切换为新的调用方式
|
|
|
+ const workbook = XLSX.read(data, {
|
|
|
+ type: "binary",
|
|
|
+ });
|
|
|
+
|
|
|
+ let table = workbook.Sheets;
|
|
|
+ let keys = workbook.SheetNames;
|
|
|
+ console.log(workbook);
|
|
|
+ let array = [];
|
|
|
+
|
|
|
+ keys.forEach((item) => {
|
|
|
+ let obj = {};
|
|
|
+ obj.name = item;
|
|
|
+ // obj.list = XLSX.utils.sheet_to_json(table[item]);
|
|
|
+ obj.list = procressData(
|
|
|
+ XLSX.utils.sheet_to_json(table[item], {
|
|
|
+ /** Default value for null/undefined values */
|
|
|
+ defval: "", //给defval赋值为空的字符串
|
|
|
+ })
|
|
|
+ );
|
|
|
+ array.push(obj);
|
|
|
+ });
|
|
|
+ console.log(array);
|
|
|
+ console.log(JSON.stringify(array));
|
|
|
+ // // 取第一张表
|
|
|
+ // const wsname = workbook.SheetNames[0];
|
|
|
+ // // 切换为新的调用方式 生成json表格内容
|
|
|
+ // const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
|
|
|
+ // console.log(ws);
|
|
|
+ // // 后续为自己对ws数据的处理
|
|
|
+ } catch (e) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ fileReader.readAsBinaryString(files[0]);
|
|
|
+};
|
|
|
+// 表格时间转换
|
|
|
+function excelToJsDate(serialNumber) {
|
|
|
+ var date = new Date(1900, 0, serialNumber - 1);
|
|
|
+
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = date.getMonth() + 1;
|
|
|
+ const day = date.getDate();
|
|
|
+
|
|
|
+ return year + "年" + month + "月" + day + "日";
|
|
|
+}
|
|
|
+
|
|
|
+const procressData = (list) => {
|
|
|
+ let array = [];
|
|
|
+ list.forEach((item) => {
|
|
|
+ let obj = {};
|
|
|
+ for (let key in item) {
|
|
|
+ switch (key) {
|
|
|
+ case "年代":
|
|
|
+ obj["age"] = item[key];
|
|
|
+ break;
|
|
|
+ case "序号":
|
|
|
+ obj["index"] = item[key];
|
|
|
+ break;
|
|
|
+ case "文物名称":
|
|
|
+ obj["name"] = item[key];
|
|
|
+ break;
|
|
|
+ case "文物简介":
|
|
|
+ obj["desc"] = item[key];
|
|
|
+ break;
|
|
|
+ case "文物类型":
|
|
|
+ if (item[key] === "二维") {
|
|
|
+ obj["type"] = "2D";
|
|
|
+ } else if (item[key] === "三维") {
|
|
|
+ obj["type"] = "3D";
|
|
|
+ }
|
|
|
+
|
|
|
+ break;
|
|
|
+ case "更新日期":
|
|
|
+ obj["updateTime"] = excelToJsDate(item[key]);
|
|
|
+ break;
|
|
|
+ case "馆藏":
|
|
|
+ obj["collection"] = item[key];
|
|
|
+ break;
|
|
|
+ case "模型链接":
|
|
|
+ obj["modelUrl"] = item[key];
|
|
|
+ break;
|
|
|
+ case "缩略图名称":
|
|
|
+ obj["thumb"] = item[key];
|
|
|
+ break;
|
|
|
+ case "详情图名称":
|
|
|
+ obj["deatilsImg"] = item[key];
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ array.push(obj);
|
|
|
+ });
|
|
|
+ return array;
|
|
|
+};
|
|
|
|
|
|
const swiperData = ref(null); //所有数据
|
|
|
const currentData = ref(null); //当前展示的数据
|
|
|
@@ -70,12 +188,15 @@ const swiperOptions = {
|
|
|
stopOnLastSlide: false, //切换到最后一个时不停止自动播放
|
|
|
disableOnInteraction: false, //触碰后不停止自动播放
|
|
|
},
|
|
|
- slidesPerView: 2.8,
|
|
|
+ slidesPerView: 2.5,
|
|
|
spaceBetween: 10,
|
|
|
freeMode: false,
|
|
|
speed: 10000, //切换速度
|
|
|
on: {
|
|
|
- slideChangeTransitionEnd: function (e) {},
|
|
|
+ slideChangeTransitionEnd: function () {
|
|
|
+ // console.error("slideChangeTransitionEnd");
|
|
|
+ // this.autoplay.start();
|
|
|
+ },
|
|
|
init: function (swiper) {},
|
|
|
},
|
|
|
};
|
|
|
@@ -83,52 +204,157 @@ let mySwiper = null;
|
|
|
let mySwiper1 = null;
|
|
|
let mySwiper2 = null;
|
|
|
const setSwiper = () => {
|
|
|
+ toggleOptions(0);
|
|
|
mySwiper = new Swiper(".swiper-container", swiperOptions);
|
|
|
};
|
|
|
const setSwiper1 = () => {
|
|
|
+ toggleOptions(1);
|
|
|
mySwiper1 = new Swiper(".swiper-container1", swiperOptions);
|
|
|
};
|
|
|
const setSwiper2 = () => {
|
|
|
+ toggleOptions(2);
|
|
|
mySwiper2 = new Swiper(".swiper-container2", swiperOptions);
|
|
|
};
|
|
|
+
|
|
|
+//个数小于4个不允许轮播
|
|
|
+const toggleOptions = (index) => {
|
|
|
+ if (currentData.value.list[index].length < 3) {
|
|
|
+ swiperOptions.loop = false;
|
|
|
+ swiperOptions.autoplay = false;
|
|
|
+ swiperOptions.speed = 300;
|
|
|
+ swiperOptions.freeMode = true;
|
|
|
+ } else {
|
|
|
+ swiperOptions.loop = true;
|
|
|
+ swiperOptions.autoplay = {
|
|
|
+ delay: 0, //每循环一圈，间隔时间，无缝轮询，则为0
|
|
|
+ stopOnLastSlide: false, //切换到最后一个时不停止自动播放
|
|
|
+ disableOnInteraction: false, //触碰后不停止自动播放
|
|
|
+ };
|
|
|
+ swiperOptions.speed = 10000;
|
|
|
+ swiperOptions.freeMode = false;
|
|
|
+ }
|
|
|
+};
|
|
|
const closeIframe = () => {
|
|
|
showIframe.value = false;
|
|
|
};
|
|
|
const changeIframe = (item) => {
|
|
|
- console.error(item)
|
|
|
+ console.error(item);
|
|
|
iframeData.value = item;
|
|
|
showIframe.value = true;
|
|
|
};
|
|
|
|
|
|
const loadJosnData = () => {
|
|
|
- fetch("./json/data.json")
|
|
|
+ // fetch("./json/data.json")
|
|
|
+ fetch("./json/test.json")
|
|
|
.then((res) => res.json())
|
|
|
.then((res) => {
|
|
|
swiperData.value = res;
|
|
|
- currentData.value = res[0];
|
|
|
- console.log(res);
|
|
|
- nextTick(() => {
|
|
|
- initSwiper();
|
|
|
- });
|
|
|
+ // currentData.value = res[0];
|
|
|
+ console.error(swiperData.value);
|
|
|
+ hanlderSwiper({ name: "全部" });
|
|
|
});
|
|
|
};
|
|
|
const initSwiper = () => {
|
|
|
- setSwiper();
|
|
|
- setSwiper1();
|
|
|
- setSwiper2();
|
|
|
+ clearSwiper();
|
|
|
+ if (currentData.value.list[0] && currentData.value.list[0].length) {
|
|
|
+ setSwiper();
|
|
|
+ }
|
|
|
+ if (currentData.value.list[1] && currentData.value.list[1].length) {
|
|
|
+ setSwiper1();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (currentData.value.list[2] && currentData.value.list[2].length) {
|
|
|
+ setSwiper2();
|
|
|
+ }
|
|
|
+};
|
|
|
+const hanlderSwiper = (item) => {
|
|
|
+ let list = [];
|
|
|
+ if (item.name == "全部") {
|
|
|
+ swiperData.value.forEach((item) => {
|
|
|
+ list = list.concat(item.list);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ list = item.list;
|
|
|
+ }
|
|
|
+
|
|
|
+ let length = list.length;
|
|
|
+ console.error(length);
|
|
|
+
|
|
|
+ let groupList = [];
|
|
|
+ //少于3个的情况
|
|
|
+ if (length <= 3) {
|
|
|
+ groupList.push(list);
|
|
|
+ currentData.value = {
|
|
|
+ list: groupList,
|
|
|
+ name: item.name,
|
|
|
+ };
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 只有三行
|
|
|
+ if (length >= 18) {
|
|
|
+ let group = 0;
|
|
|
+ if (length % 3 == 0) {
|
|
|
+ group = Math.ceil(length / 3);
|
|
|
+ } else {
|
|
|
+ group = (length - (length % 3)) / 3;
|
|
|
+ }
|
|
|
+
|
|
|
+ let one = list.slice(0, group);
|
|
|
+ let two = list.slice(group, 2 * group);
|
|
|
+ let three = list.slice(2 * group, length);
|
|
|
+ groupList.push(one);
|
|
|
+ groupList.push(two);
|
|
|
+ groupList.push(three);
|
|
|
+ } else if (length >= 6 && length < 18) {
|
|
|
+ // 只有两行
|
|
|
+ let one = list.slice(0, 6);
|
|
|
+ let two = list.slice(6, length);
|
|
|
+ groupList.push(one);
|
|
|
+ groupList.push(two);
|
|
|
+ } else if (length >= 4 && length < 6) {
|
|
|
+ // 只有一行
|
|
|
+ let one = list.slice(0, length);
|
|
|
+ groupList.push(one);
|
|
|
+ }
|
|
|
+
|
|
|
+ currentData.value = {
|
|
|
+ list: groupList,
|
|
|
+ name: item.name,
|
|
|
+ };
|
|
|
};
|
|
|
const clearSwiper = () => {
|
|
|
- mySwiper.destroy();
|
|
|
- mySwiper1.destroy();
|
|
|
- mySwiper2.destroy();
|
|
|
+ mySwiper && mySwiper.destroy();
|
|
|
+ mySwiper1 && mySwiper1.destroy();
|
|
|
+ mySwiper2 && mySwiper2.destroy();
|
|
|
};
|
|
|
-const changeItem = (item) => {
|
|
|
- currentData.value = item;
|
|
|
+watch(
|
|
|
+ () => currentData.value,
|
|
|
+ (val) => {
|
|
|
+ console.error(val);
|
|
|
+ nextTick(() => {
|
|
|
+ initSwiper();
|
|
|
+ });
|
|
|
+ }
|
|
|
+);
|
|
|
+const changeItem = (item, index) => {
|
|
|
+ if (item === "all") {
|
|
|
+ hanlderSwiper({ name: "全部" });
|
|
|
+ showSwitch.value = false;
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // currentData.value = item;
|
|
|
+
|
|
|
+ hanlderSwiper(item);
|
|
|
showSwitch.value = false;
|
|
|
- clearSwiper();
|
|
|
- nextTick(() => {
|
|
|
- initSwiper();
|
|
|
- });
|
|
|
+ // clearSwiper();
|
|
|
+ // nextTick(() => {
|
|
|
+ // initSwiper();
|
|
|
+ // });
|
|
|
+};
|
|
|
+const goMore = () => {
|
|
|
+ window.location.href =
|
|
|
+ "https://content-static.cctvnews.cctv.com/snow-book/special.html?channelId=1160&page_type=share&specialId=17446950343365427321&toc_style_id=feeds_with_title&track_id=FA013000-00D6-4290-9087-29BF32E38470_759124785810&share_to=wechat";
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
loadJosnData();
|
|
|
@@ -142,19 +368,17 @@ onMounted(() => {
|
|
|
background-size: cover;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: 50%;
|
|
|
- background-image: url("https://zzbbh.4dage.com/webM/dist/img/bg.d8cfb8a5.jpg");
|
|
|
+ background-image: url("@/assets/img/home_bg.jpg");
|
|
|
color: #fff;
|
|
|
.title {
|
|
|
- font-size: 0.8rem;
|
|
|
text-align: center;
|
|
|
- margin-top: 0.5333rem;
|
|
|
- margin-bottom: 0.5333rem;
|
|
|
- }
|
|
|
- .en-title {
|
|
|
- font-size: 0.64rem;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 0.5333rem;
|
|
|
+ margin: 60px auto 1.4667rem;
|
|
|
+ width: 8.2133rem;
|
|
|
+ height: 2.0667rem;
|
|
|
+ background: url("@/assets/img/home_title.svg") no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
}
|
|
|
+
|
|
|
.item-box {
|
|
|
// display: flex;
|
|
|
position: relative;
|
|
|
@@ -170,58 +394,136 @@ onMounted(() => {
|
|
|
-ms-writing-mode: tb-lr;
|
|
|
writing-mode: vertical-lr;
|
|
|
display: inline-block;
|
|
|
- color: #9c8e4f;
|
|
|
- text-shadow: 0 0 4px #000;
|
|
|
+ color: #6d624c;
|
|
|
+ // text-shadow: 0 0 4px #000;
|
|
|
letter-spacing: 2px;
|
|
|
- font-family: KaiTi;
|
|
|
- font-size: 14px;
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-size: 0.32rem;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
- .switch {
|
|
|
+ .bottom-controls {
|
|
|
position: absolute;
|
|
|
bottom: 0.5333rem;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- .current-item {
|
|
|
- font-size: 0.64rem;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .arrow {
|
|
|
- width: 0.32rem;
|
|
|
- height: 0.32rem;
|
|
|
- background: url(../../assets/img/arrow.png) no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- margin-left: 0.1333rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
+ .switch {
|
|
|
+ width: 3.56rem;
|
|
|
+ height: 1.0667rem;
|
|
|
+ background: url("@/assets/img/niandai.svg") no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.36rem;
|
|
|
+ color: #fffbed;
|
|
|
+ line-height: 0.36rem;
|
|
|
+ // padding: 0 0.3067rem 0 0;
|
|
|
+ .current-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 0.4933rem;
|
|
|
+ > span {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ width: 0.32rem;
|
|
|
+ height: 0.32rem;
|
|
|
+ background: url(../../assets/img/arrow.png) no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ margin-left: 0.1333rem;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .switch-list {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- font-size: 0.5333rem;
|
|
|
- bottom: 110%;
|
|
|
- background: #fff;
|
|
|
- color: #000;
|
|
|
- text-align: center;
|
|
|
- transition: all 0.3s;
|
|
|
- transform: scale(0);
|
|
|
- transform-origin: center bottom;
|
|
|
- opacity: 0;
|
|
|
- &.open {
|
|
|
- transform: scale(1);
|
|
|
- opacity: 1;
|
|
|
+ .switch-list {
|
|
|
+ padding: 0.2667rem 0.4933rem;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 110%;
|
|
|
+ background: linear-gradient(180deg, rgba(109, 98, 76, 1) 0%, rgba(146, 134, 109, 1) 100%);
|
|
|
+ color: #fffbed;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s;
|
|
|
+ transform: scale(0);
|
|
|
+ transform-origin: center bottom;
|
|
|
+ border-radius: 0.1067rem;
|
|
|
+ opacity: 0;
|
|
|
+ &.open {
|
|
|
+ transform: scale(1);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .scroll-box {
|
|
|
+ max-height: 5.7333rem;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ /* 自定义整个滚动条 */
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 3px; /* 滚动条宽度 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 自定义滚动条轨道 */
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background: transparent; /* 轨道颜色 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 自定义滚动条的滑块（thumb） */
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background: #fffbed; /* 滑块颜色 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 当hover或active状态时，自定义滑块的颜色 */
|
|
|
+ &::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #555;
|
|
|
+ }
|
|
|
+
|
|
|
+ .switch-item {
|
|
|
+ height: 0.8rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ // padding: 0 0 0 0.4933rem;
|
|
|
+ &.active {
|
|
|
+ color: #e8e050;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ .more-btn {
|
|
|
+ width: 1.0667rem;
|
|
|
+ height: 1.0667rem;
|
|
|
+ background: url("@/assets/img/more.svg") no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ margin-left: 0.2667rem;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
<style>
|
|
|
.swiper-dom {
|
|
|
width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ /* margin-top: 10px; */
|
|
|
+ margin-bottom: 0.5333rem;
|
|
|
overflow: visible !important;
|
|
|
+ padding: 0 20px;
|
|
|
}
|
|
|
.swiper-wrapper {
|
|
|
transition-timing-function: linear !important;
|
