|
|
@@ -0,0 +1,757 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <!-- <div class="follow">
|
|
|
+ <div ref="top" class="list-top" :style="{ top: barShow ? '46px' : 0 }">
|
|
|
+ <div class="top" v-if="!minterId">
|
|
|
+ <div class="name">版权市场</div>
|
|
|
+ <img src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="swiperContent" ref="swiperContent">
|
|
|
+ <swiper
|
|
|
+ pagination
|
|
|
+ :slides-per-view="5"
|
|
|
+ :space-between="16"
|
|
|
+ class="mySwiper"
|
|
|
+ :autoplay="{ delay: 3500 }"
|
|
|
+ v-if="settings.length > 0"
|
|
|
+ >
|
|
|
+ <swiper-slide class="setting" v-for="item in settings" :key="item.id">
|
|
|
+ <van-image
|
|
|
+ width="calc(20vw - 19.2px)"
|
|
|
+ height="calc(20vw - 19.2px)"
|
|
|
+ radius="8"
|
|
|
+ :src="getImg(item.pic)"
|
|
|
+ fit="cover"
|
|
|
+ @click="showBanner(item.id)"
|
|
|
+ />
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ <div class="banner-box" :style="{ height: bannerHeight + 'px' }">
|
|
|
+ <img :style="{ left: moreLeft + 'px' }" class="more" alt="" />
|
|
|
+ <div class="banner-list" :style="{ maxHeight: maxBannerHeight + 'px' }">
|
|
|
+ <div class="banner-item" v-for="item in banners" :key="item.id">
|
|
|
+ <div class="setting" @click="goNext(item, '&source=TRANSFER')">
|
|
|
+ <van-image
|
|
|
+ width="calc(20vw - 19.2px)"
|
|
|
+ height="calc(20vw - 19.2px)"
|
|
|
+ radius="8"
|
|
|
+ :src="getImg(item.pic)"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="banner-wrapper" v-if="showSetting" @touchstart="touchEvent"></div>
|
|
|
+ </div>
|
|
|
+ <van-tabs
|
|
|
+ v-model:active="sort"
|
|
|
+ :ellipsis="false"
|
|
|
+ line-width="16"
|
|
|
+ line-height="2"
|
|
|
+ @click-tab="changeTab"
|
|
|
+ :class="{ trans: source == 'TRANSFER' }"
|
|
|
+ >
|
|
|
+ <van-tab
|
|
|
+ :title="item.label"
|
|
|
+ :name="item.value"
|
|
|
+ :title-class="item.type === 'select' && sortDes ? sortDes : ''"
|
|
|
+ :key="index"
|
|
|
+ v-for="(item, index) in selectOptions"
|
|
|
+ >
|
|
|
+ <template v-if="item.type === 'select'" #title>
|
|
|
+ <div class="tab">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <van-icon size="8" name="arrow-up" />
|
|
|
+ <van-icon size="8" name="arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+
|
|
|
+ <van-button
|
|
|
+ @click="changeSort"
|
|
|
+ v-if="source == 'TRANSFER' && !title"
|
|
|
+ class="sala"
|
|
|
+ color="#F5F7FA"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="arrow-down"
|
|
|
+ icon-position="right"
|
|
|
+ round
|
|
|
+ >{{ salable ? '在售中' : salable === false ? '仅展示' : '综合排序' }}</van-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-action-sheet
|
|
|
+ v-model:show="showAction"
|
|
|
+ @select="selectAction"
|
|
|
+ :actions="actions"
|
|
|
+ cancel-text="取消"
|
|
|
+ close-on-click-action
|
|
|
+ />
|
|
|
+
|
|
|
+ <van-pull-refresh
|
|
|
+ success-text="加载成功"
|
|
|
+ success-duration="500"
|
|
|
+ v-model="isLoading"
|
|
|
+ :head-height="80"
|
|
|
+ @refresh="onRefresh"
|
|
|
+ >
|
|
|
+ <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
|
|
|
+ <template v-for="(item, index) in showList" :key="index">
|
|
|
+ <product-info dark v-model:info="list[index]" @update:info="init"></product-info>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <van-empty
|
|
|
+ :image="require('@assets/kong_png_yongyoude (1).png')"
|
|
|
+ v-if="empty"
|
|
|
+ description="没有任何藏品哦~"
|
|
|
+ />
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </div> -->
|
|
|
+ <div class="content">
|
|
|
+ <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? 46 : 0">
|
|
|
+ <div class="content_top">
|
|
|
+ <div class="selected_recommendations">
|
|
|
+ <div class="selected_recommendations_title">{{ title || pageName }}</div>
|
|
|
+ <img
|
|
|
+ :src="require('@assets/icon-sosuo.png')"
|
|
|
+ alt=""
|
|
|
+ class="selected_recommendations_img"
|
|
|
+ @click="goSearch"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="recommended_switching">
|
|
|
+ <!-- 标签页展示切换 -->
|
|
|
+ <van-tabs
|
|
|
+ v-model:active="sort"
|
|
|
+ :ellipsis="false"
|
|
|
+ line-height="2"
|
|
|
+ title-active-color="#28B6FF"
|
|
|
+ @click-tab="changeTab"
|
|
|
+ :class="{ trans: source == 'TRANSFER' }"
|
|
|
+ >
|
|
|
+ <van-tab
|
|
|
+ :title="item.label"
|
|
|
+ :name="item.value"
|
|
|
+ :title-class="item.type === 'select' && sortDes ? sortDes : ''"
|
|
|
+ :key="index"
|
|
|
+ v-for="(item, index) in selectOptions"
|
|
|
+ >
|
|
|
+ <template v-if="item.type === 'select'" #title>
|
|
|
+ <div class="tab">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <van-icon size="8" name="arrow-up" />
|
|
|
+ <van-icon size="8" name="arrow-down" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <!-- <div class="label_tabs">
|
|
|
+ <div :class="tabLabel == 'whole'?'label_selected':'label_not_selected'" @click="tabLabel='whole'" class="label_tab">全部</div>
|
|
|
+ <div :class="tabLabel == 'onSale'?'label_selected':'label_not_selected'" @click="tabLabel='onSale'" class="label_tab">最新</div>
|
|
|
+ <div :class="tabLabel == 'showOnly'?'label_selected':'label_not_selected'" @click="tabLabel='showOnly'" class="label_tab">最热</div>
|
|
|
+ <div :class="tabLabel == 'notShown'?'label_selected':'label_not_selected'" @click="tabLabel='notShown'" class="label_tab">价格
|
|
|
+ <div class="price_symbol" v-if="tabLabel != 'notShown'">
|
|
|
+ <img :src="require('@assets/icon-arrow-down.png')" alt="" class="price_symbol_one price_symbol_img">
|
|
|
+ <img :src="require('@assets/icon-arrow-down.png')" alt="" class="price_symbol_img">
|
|
|
+ </div>
|
|
|
+ <div class="price_symbol" v-else>
|
|
|
+ <img :src="require('@assets/iocn_zhankai.png')" alt="" class="price_symbol_img">
|
|
|
+ <img :src="require('@assets/iocn_zhankai.png')" alt="" class="price_symbol_img price_symbol_one">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="sorting_selection" @click="changeSort" v-if="source == 'TRANSFER' && !title">
|
|
|
+ <div class="sorting_selection_con">
|
|
|
+ {{ salable ? '在售中' : salable === false ? '仅展示' : '综合排序' }}
|
|
|
+ </div>
|
|
|
+ <img :src="require('@assets/icon-arrow-down.png')" alt="" class="sorting_selection_img" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-sticky>
|
|
|
+ <van-action-sheet
|
|
|
+ v-model:show="showAction"
|
|
|
+ :actions="actions"
|
|
|
+ cancel-text="取消"
|
|
|
+ close-on-click-action
|
|
|
+ @select="selectAction"
|
|
|
+ />
|
|
|
+ <van-list
|
|
|
+ style="padding-bottom: 1px"
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text=""
|
|
|
+ @load="getData"
|
|
|
+ >
|
|
|
+ <div class="selected_recommendations_list">
|
|
|
+ <template v-for="(item, index) in showList" :key="item.id">
|
|
|
+ <CollectionList v-model:info="list[index]"></CollectionList
|
|
|
+ ></template>
|
|
|
+ </div>
|
|
|
+ <van-empty
|
|
|
+ :image="require(`@assets/storage_room_icon_01.png`)"
|
|
|
+ v-if="empty"
|
|
|
+ description="没有任何藏品哦~"
|
|
|
+ >
|
|
|
+ </van-empty>
|
|
|
+ <div class="go_stroll" v-if="empty">
|
|
|
+ <van-button class="h44" size="small" color="#28B6FF" :round="true" to="/">去逛逛</van-button>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
|
+
|
|
|
+// import 'swiper/swiper.min.css';
|
|
|
+// import 'swiper/swiper-bundle.min.css';
|
|
|
+
|
|
|
+// import SwiperCore, { Pagination, Autoplay } from 'swiper';
|
|
|
+
|
|
|
+// install Swiper modules
|
|
|
+// SwiperCore.use([Pagination, Autoplay]);
|
|
|
+// import ProductInfo from '../../components/product/productInfo.vue';
|
|
|
+import product from '../../mixins/product';
|
|
|
+import CollectionList from '../../components/CollectionList.vue';
|
|
|
+import list from '../../mixins/list';
|
|
|
+import banner from '../../mixins/banner';
|
|
|
+import { useWindowSize } from '@vant/use';
|
|
|
+export default {
|
|
|
+ name: 'productList',
|
|
|
+ // components: { ProductInfo, Swiper, SwiperSlide },
|
|
|
+ components: {
|
|
|
+ CollectionList
|
|
|
+ },
|
|
|
+ inject: ['setKeeps', 'scrollWrapper', 'changeScroll','bar'],
|
|
|
+ mixins: [product, list, banner],
|
|
|
+ setup() {
|
|
|
+ const { width, height } = useWindowSize();
|
|
|
+
|
|
|
+ return { windowWidth: width };
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ empty: false,
|
|
|
+ beforeSort: '',
|
|
|
+ sort: 'id,desc',
|
|
|
+ sortDes: '',
|
|
|
+ type: '',
|
|
|
+ source: '',
|
|
|
+ minterId: '',
|
|
|
+ selectOptions: [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: 'id,desc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '最新',
|
|
|
+ value: 'id,desc;'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '最热',
|
|
|
+ value: 'likes,desc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '价格',
|
|
|
+ value: 'price',
|
|
|
+ type: 'select'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ url: '/collection/all',
|
|
|
+ title: '',
|
|
|
+ salable: '',
|
|
|
+ scrollTop: 0,
|
|
|
+ showAction: false,
|
|
|
+ banners: [],
|
|
|
+ settings: [],
|
|
|
+ normalHeight: 0,
|
|
|
+ settingId: 0,
|
|
|
+ showSetting: false,
|
|
|
+ barShow: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ pageName() {
|
|
|
+ return this.getLabelName(this.source, this.sourceOptions) || this.getLabelName(this.type, this.typeOptions);
|
|
|
+ },
|
|
|
+ showList() {
|
|
|
+ let list = [];
|
|
|
+ let allList = [...this.list];
|
|
|
+ allList.forEach(item => {
|
|
|
+ let info = list.find(_item => {
|
|
|
+ return _item.id === item.id;
|
|
|
+ });
|
|
|
+ if (!info) {
|
|
|
+ list.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return list;
|
|
|
+ },
|
|
|
+ actions() {
|
|
|
+ let list = [{ name: '综合排序' }, { name: '在售中' }, { name: '仅展示' }];
|
|
|
+ if (this.salable === '') {
|
|
|
+ list[0].color = this.$colors.prim;
|
|
|
+ }
|
|
|
+ if (this.salable === true) {
|
|
|
+ list[1].color = this.$colors.prim;
|
|
|
+ }
|
|
|
+ if (this.salable === false) {
|
|
|
+ list[2].color = this.$colors.prim;
|
|
|
+ }
|
|
|
+ return list;
|
|
|
+ },
|
|
|
+ bannerHeight() {
|
|
|
+ let height = Math.ceil(this.banners.length / 3);
|
|
|
+ let _h = this.accMul(this.accAdd(this.accMul(this.windowWidth, 0.2), 20), height);
|
|
|
+ if (_h > this.maxBannerHeight - 8) {
|
|
|
+ _h = this.maxBannerHeight - 8;
|
|
|
+ }
|
|
|
+ return this.showSetting && _h ? _h + 24 : 0;
|
|
|
+ },
|
|
|
+ maxBannerHeight() {
|
|
|
+ let _h = this.accMul(this.accAdd(this.accMul(this.windowWidth, 0.2), 20), 3);
|
|
|
+ return _h + 8;
|
|
|
+ },
|
|
|
+ moreLeft() {
|
|
|
+ let index =
|
|
|
+ [...this.settings].findIndex(item => {
|
|
|
+ return item.id === this.settingId;
|
|
|
+ }) || 0;
|
|
|
+
|
|
|
+ let _l = this.accAdd(-21.6, this.accMul(this.windowWidth, 0.1));
|
|
|
+ let _pW = this.accAdd(-3.2, this.accMul(this.windowWidth, 0.2));
|
|
|
+ let _w = this.accMul(_pW, index);
|
|
|
+ return this.accAdd(_l, _w);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // watch: {
|
|
|
+ // showSetting() {
|
|
|
+ // if (this.showSetting) {
|
|
|
+ // document.getElementById('scroll-wrapper').style.overflow = 'hidden';
|
|
|
+ // } else {
|
|
|
+ // document.getElementById('scroll-wrapper').style.overflow = 'auto';
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ if (document.getElementById('navBar')) {
|
|
|
+ this.barShow = true;
|
|
|
+ } else {
|
|
|
+ this.barShow = false;
|
|
|
+ }
|
|
|
+ if (this.$route.query.title) {
|
|
|
+ this.title = this.$route.query.title;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onRefresh() {
|
|
|
+ this.getData(true).then(() => {
|
|
|
+ this.isLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.$store.dispatch('getUsedBuy');
|
|
|
+ this.source = 'TRANSFER';
|
|
|
+ this.salable = true;
|
|
|
+ // this.getBanner();
|
|
|
+ this.getSetting();
|
|
|
+ if (this.isLogin) {
|
|
|
+ this.$store.dispatch('getUserInfo').then(res => {
|
|
|
+ if (!res.riskWarning) {
|
|
|
+ this.$dialog.alert({
|
|
|
+ title: '风险提示声明',
|
|
|
+ message:
|
|
|
+ '古藏站平台发售的数字藏品具备收藏欣赏或版权价值，古藏站发售的藏品首发价格为官方指导价，古藏站对藏品二手市场价格不构成任何指导建议。请各位藏家理性消费，仔细阅读相关权益，杜绝恶意炒作，避免损失。',
|
|
|
+ confirmButtonText: '已阅读并同意'
|
|
|
+ });
|
|
|
+ this.updateUser({ riskWarning: true }, false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ touchEvent() {
|
|
|
+ this.hideSetting();
|
|
|
+ },
|
|
|
+ getSetting() {
|
|
|
+ this.$http
|
|
|
+ .post('/setting/byFlag', { flag: 1 })
|
|
|
+ .then(res => {
|
|
|
+ this.settings = res;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.normalHeight = this.$refs.top.$el.offsetHeight;
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showBanner(settingId) {
|
|
|
+ if (this.settingId === settingId && this.showSetting) {
|
|
|
+ this.hideSetting();
|
|
|
+ } else {
|
|
|
+ this.settingId = settingId;
|
|
|
+ this.showSetting = true;
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ '/banner/all',
|
|
|
+ {
|
|
|
+ query: {
|
|
|
+ type: 'MARKET',
|
|
|
+ del: false,
|
|
|
+ settingId: settingId
|
|
|
+ },
|
|
|
+ sort: 'sort,asc;createdAt,desc'
|
|
|
+ },
|
|
|
+ { body: 'json' }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.banners = res.content;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hideSetting() {
|
|
|
+ this.showSetting = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.banners = [];
|
|
|
+ }, 300);
|
|
|
+ },
|
|
|
+ changeSort() {
|
|
|
+ this.showAction = true;
|
|
|
+ },
|
|
|
+ selectAction(action) {
|
|
|
+ if (action.name == '综合排序') {
|
|
|
+ this.salable = '';
|
|
|
+ }
|
|
|
+ if (action.name == '在售中') {
|
|
|
+ this.salable = true;
|
|
|
+ }
|
|
|
+ if (action.name == '仅展示') {
|
|
|
+ this.salable = false;
|
|
|
+ }
|
|
|
+ this.hideSetting();
|
|
|
+ this.getData(true);
|
|
|
+ },
|
|
|
+ changeTab(info) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (info.name === 'price') {
|
|
|
+ this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
|
|
|
+ }
|
|
|
+ this.hideSetting();
|
|
|
+ this.getData(true, this.normalHeight).then(() => {
|
|
|
+ this.changeScroll(this.normalHeight);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeData() {
|
|
|
+ let sort = this.sort;
|
|
|
+ if (sort == 'price') {
|
|
|
+ sort = 'price,' + this.sortDes;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ type: this.type,
|
|
|
+ source: this.source,
|
|
|
+ onShelf: true,
|
|
|
+ del: false,
|
|
|
+ minterId: this.minterId,
|
|
|
+ salable: this.salable
|
|
|
+ },
|
|
|
+ sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
|
|
|
+ };
|
|
|
+ },
|
|
|
+ goSearch() {
|
|
|
+ let url = '/productSearch';
|
|
|
+ if (this.type) {
|
|
|
+ url += '?type=' + this.type;
|
|
|
+ }
|
|
|
+ if (this.source) {
|
|
|
+ url += '?source=' + this.source;
|
|
|
+ }
|
|
|
+ this.$router.push(url);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.changeScroll(this.scrollTop);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.sort = this.beforeSort;
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeRouteLeave(to, from, next) {
|
|
|
+ // document.getElementById('scroll-wrapper').style.overflow = 'auto';
|
|
|
+ if (to.name === 'productDetail') {
|
|
|
+ this.beforeSort = this.sort;
|
|
|
+ this.scrollTop = this.scrollWrapper.value.scrollTop;
|
|
|
+ this.setKeeps(['productList']);
|
|
|
+ } else {
|
|
|
+ this.beforeSort = '';
|
|
|
+ this.scrollTop = 0;
|
|
|
+ this.setKeeps(['productList'], false);
|
|
|
+ }
|
|
|
+ next();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/ .van-tabs__nav--complete {
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+/deep/ .van-tab {
|
|
|
+ margin-right: 30px;
|
|
|
+}
|
|
|
+/deep/ .van-tabs__nav--line.van-tabs__nav--complete {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.navBar {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+}
|
|
|
+.shop_list_one {
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+/deep/ .van-tabs__line {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+/deep/ .van-button{
|
|
|
+ width: 100%;
|
|
|
+ height: 38px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.go_stroll{
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px 48px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ background-color: #0a0a1b;
|
|
|
+ .content_top {
|
|
|
+ width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ background: #15152d;
|
|
|
+ padding: 16px 0px 10px 0px;
|
|
|
+ // padding: 16px 16px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .selected_recommendations {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 0px 16px;
|
|
|
+ .selected_recommendations_title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .selected_recommendations_img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recommended_switching {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /deep/ .van-tabs__nav--line {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .tab {
|
|
|
+ position: relative;
|
|
|
+ padding-right: 14px;
|
|
|
+ .van-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ &.van-icon-arrow-down {
|
|
|
+ top: 8px;
|
|
|
+ }
|
|
|
+ &.van-icon-arrow-up {
|
|
|
+ bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label_tabs {
|
|
|
+ display: flex;
|
|
|
+ .label_tab {
|
|
|
+ position: relative;
|
|
|
+ width: 28px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-right: 30px;
|
|
|
+ line-height: 24px;
|
|
|
+ .price_symbol {
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ right: -15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .price_symbol_img {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ }
|
|
|
+ .price_symbol_one {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label_selected {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #28b6ff;
|
|
|
+ }
|
|
|
+ .label_not_selected {
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sorting_selection {
|
|
|
+ margin-top: 8px;
|
|
|
+ width: 86px;
|
|
|
+ height: 24px;
|
|
|
+ background: #29293f;
|
|
|
+ border-radius: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 4px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .sorting_selection_con {
|
|
|
+ width: 50px;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .sorting_selection_img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .selected_recommendations_list {
|
|
|
+ width: 100%;
|
|
|
+ background: #0a0a1b;
|
|
|
+ padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ .current_recommendation_con {
|
|
|
+ width: 48%;
|
|
|
+ height: 254px;
|
|
|
+ background: #29293f;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .current_recommendation_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 164px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .current_recommendation_title {
|
|
|
+ padding: 0 10px;
|
|
|
+ width: 170px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .current_recommendation_price {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 5px;
|
|
|
+ padding-left: 22px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .current_recommendation_price_one {
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #28b6ff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 1px;
|
|
|
+ left: 12px;
|
|
|
+ }
|
|
|
+ .current_recommendation_price_two {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #28b6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .current_recommendation_bottom {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .current_recommendation_bottom_left {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .current_recommendation_bottom_right {
|
|
|
+ display: flex;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ .current_recommendation_name_img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .current_recommendation_name {
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+ .give_img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ .give_number {
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-tab.van-tab--active {
|
|
|
+ color: #28b6ff;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+</style>
|
yuany