<template> <div class="layout"> <LayoutHeader class="layout-header" :show-back="true" title="商品详情"></LayoutHeader> <div class="layout-context fixscroll"> <LayoutScroll ref="pageScroll" class="cube-scroll-wrapper" @scroll-end="scrollEndHandler"> <div class="slide"> <cube-slide ref="slide" :options="slideOptions" :data="imageList"> <cube-slide-item v-for="(item, index) in imageList" :key="index"> <a click="javascript:void 0" class="square-img-container"> <square-img v-if="!item.initial" :src="item.image_url" :width="600" :height="600"/> <square-img v-else :src="item.image_url" :width="274" :height="274"/> <!-- 利用缓存, productList使用的size --> </a> </cube-slide-item> <template slot="dots" slot-scope="props"> <div class="dot-wrap"> <span class="cube-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots" :key="item">•</span> </div> </template> </cube-slide> <div class="qiugou" v-if="isQiugouEnabled" @click="qiugou"></div> </div> <div class="info-basic"> <div class="info-price"> <template v-if="price == null">{{'\u200E'}}</template> <template v-else><i>¥</i>{{price}}</template> </div> <div class="info-name"><div>{{productDetail.product_name}}</div></div> </div> <a class="banner" ref="resourceImg" v-if="resource.src" @click.prevent="gotoNewPage"> <img-size :src="sizeImg(resource.src)"/> </a> <div class="info"> <transition-group name="info-list" tag="div" class="info-list"> <div class="info-list-item" transtion="fade" v-if="activity && activity.length !== 0" @click="showActivity" key="促销"> <div class="info-list-name">促销</div> <div class="info-list-value info-promote"> <span>{{activity[0].promotionTypeStr}}</span> <i class="cubeic-arrow"></i> </div> </div> <div class="info-list-item" v-for="desc in productDec" :key="desc.text"> <div class="info-list-name">{{desc.text}}</div> <div class="info-list-value">{{desc.value}}</div> </div> </transition-group> <!-- 相关商品 --> <top-list ref="topList" v-if="topList && topList.length !== 0" :list="topList" @itemClick="gotoProduct" @allClick="gotoBrand"/> <img class="ref-img" v-lazy="prdDetailTip"/> </div> <!-- 视频资源位 --> <a class="banner video-resource" ref="videoResourceImg" v-if="videoResource.src"> <div class="video-mask" @click="onVideoPlay"></div> <VideoPlayer ref="videoPlayer" class="video-player" :source="videoResource.url" /> <img-size :src="sizeImg(videoResource.src)"/> </a> <img class="ref-img" v-lazy="prdDetailImage"/> <div class="recommend" v-if="recommend"><h2>相关推荐</h2> <product-list ref="recommendList" :list="recommend" priceKey="price" :yas-params="recommendYasParams"/> </div> </LayoutScroll> <div class="footer"> <div class="fav" @click="_toggleFav"><i class="iconfont" :class="[isFav ? 'icon-star-fill': 'icon-star-outline']"/><span>收藏</span></div> <cube-button class="sell" @click="sell">出售</cube-button> <cube-button class="buy active" @click="buy">购买</cube-button> </div> <buy-sheet v-if="showBidSheet" @hide="onBidSheetHide" :productId="productId"/> <size-request-sheet v-if="showSizeRequestSheet" @hide="onSizeRequestHide" :productId="productId"/> </div> <activity-list-sheet v-if="showActivitySheet" :list="activity" @hide="onActivitySheetHide"/> <size-select-sheet v-if="showSizeSelectSheet" :list="sizeList" :product="productDetail" :image-list="imageList" :config="selectSizeConfig" @hide="onSizeSelectSheetHide" @select="onSelectTradeProduct" @add="onRequestSize"/> <!-- <detail-useage-tips></detail-useage-tips> --> </div> </template> <script> import { Button, Slide, Popup } from 'cube-ui'; import { get } from 'lodash'; import { createNamespacedHelpers, mapGetters } from 'vuex'; import ImgSize from '../../components/img-size'; import { getImgUrl } from '../../common/utils'; import ProductList from '../list/components/productList'; import ActivityListSheet from './components/activity-list-sheet'; import prdDetailTip from '../../statics/image/product/prdDetailTip.png'; import prdDetailImage from '../../statics/image/product/prdDetailImage.png'; import SizeSelectSheet from './components/size-select-sheet'; import SizeRequestSheet from './components/size-request-sheet'; import BuySheet from './components/buy-sheet'; import TopList from './components/top-list'; import SquareImg from './components/square-img'; import stateShortCutsMixins from './mixins'; import trackingMixins from './tracking-mixins'; // import DetailUseageTips from './components/detail-useage-tips'; import VideoPlayer from '@/components/video-player'; const { mapActions, mapState } = createNamespacedHelpers('product'); const { mapActions: mapSecondActions } = createNamespacedHelpers('second'); export default { name: 'ProductDetail', mixins: [stateShortCutsMixins, trackingMixins], components: { // DetailUseageTips, SizeSelectSheet, ActivityListSheet, SizeRequestSheet, BuySheet, ImgSize, ProductList, TopList, SquareImg, 'cube-button': Button, 'cube-slide': Slide, 'cube-slide-item': Slide.Item, 'cube-popup': Popup, VideoPlayer }, props: { productId: { required: true, }, }, data() { return { slideOptions: { eventPassthrough: 'vertical', }, prdDetailTip, prdDetailImage, showActivitySheet: false, showBidSheet: false, showSizeSelectSheet: false, showSizeRequestSheet: false, selectSizeConfig: {}, /** * 商品详情页-推荐商品曝光时 * XY_UFO_SHOW_EVENT * 1.P_NAME:页面名称,XY_UFOProductDetail; * 2.P_PARAM:页面参数; * 3.I_INDEX:曝光顺序; * 4.PRD_ID:商品id; * 5.POS_ID: 1:相关商品,2: 推荐推荐,3: 相关商品列表页面 */ recommendYasParams: { P_NAME: 'XY_UFOProductDetail', P_PARAM: this.productId, POS_ID: 2, }, recommendYasIndex: 0, // 推荐商品爆光顺序 }; }, computed: { ...mapGetters(['isQiugouEnabled']), ...mapState(['resourceContentCode']), productDec() { const goods = get(this.productDetail, 'goods_list[0]', {}); const descList = [ { text: '颜色', value: goods.goods_name || '', }, { text: '品牌', value: this.productDetail.brand_name }, { text: '系列', value: this.productDetail.series_name }, { text: '发售时间', value: this.productDetail.sale_time }, { text: '货号', value: this.productDetail.product_code } ]; if (this.productDetail.offer_price) { descList.splice(-1, 0, { text: '发售价格', value: `¥${this.productDetail.offer_price} 仅供参考` }); } return descList; }, sizeList() { return get(this.productDetail, 'goods_list[0].size_list', null); }, title() { return get(this.productDetail, 'product_name', '商品详情'); }, price() { let price = []; if (this.productDetail.least_price) { price.push(this.productDetail.least_price); } if (this.productDetail.second_hand_least_price) { price.push(this.productDetail.second_hand_least_price); } if (price.length === 0) { return null; } return Math.min(...price); } }, mounted() { this.$store.dispatch('getSysConfigQiugou'); // 在action-sheet显示控制与对应关闭方法 this.actionSheetCloseMap = { showActivitySheet: 'onActivitySheetHide', showBidSheet: 'onBidSheetHide', showSizeSelectSheet: 'onSizeSelectSheetHide', showSizeRequestSheet: 'onSizeRequestHide', }; // create watcher for list data this.watchList = []; ['resource.url', 'topList', 'recommend'].forEach(key => { this.watchList.push(this.$watch(key, val => { if (val) { this.listDataDirty = true; } })); }); }, beforeDestroy() { if (this.watchList) { this.watchList.forEach(item => { item && item(); }); this.watchList = null; } }, asyncData({ store, router }) { const productId = parseInt(router.params.productId, 10); if (isNaN(productId)) { throw new Error('无效的商品ID'); } /** * 接收初始化数据 */ const initialProductInfo = router.params.productInfo; if (initialProductInfo) { store.dispatch('product/setupInitialProductInfo', initialProductInfo); } return store.dispatch('product/fetchProductInfo', { productId }); }, activated() { if (this.$refs.pageScroll) { this.$refs.pageScroll.scrollTop = 0; } this.loadData(this.productId); this.refresh(); if (this._resourceImgWatcher) { this._resourceImgWatcher(); } if (this.resource && this.resource.url) { this.yasResourceAvailable(); } else { this._resourceImgWatcher = this.$watch(() => { return this.resource && this.resource.url; }, (url) => { if (url) { this._resourceImgWatcher && this._resourceImgWatcher(); this.yasResourceAvailable(); } }); } // yas /** * 商品详情页打开时 * XY_UFO_PRD_DT_INFO * 1.FP_NAME:来源页面名称;eg:XY_UFOSearchList,XY_UFOSeriesList,XY_UFOBrandList、XY_UFOProductPoolList、UFOProductDetail_LIST等; * 2.FP_PARAM:页面参数;搜索关键词,系列ID,品牌ID,商品池ID; * 3.TAB_ID:tab切id,1-人气,2-价格,3-新品; * 4.TAB_NAME:tab切名称,人气,价格,新品; * 5.PRD_ID:商品id; */ let param = { P_NAME: `XY_UFO${this.$route.name}`, P_PARAM: this.productId, PRD_ID: this.productId, }; const yasParmas = this.$route.params.yasParams; if (yasParmas) { if (yasParmas.P_NAME) { yasParmas.FP_NAME = yasParmas.P_NAME; } if (yasParmas.P_PARAM) { yasParmas.FP_PARAM = yasParmas.P_PARAM; } param = { ...yasParmas, ...param }; } this.$store.dispatch('reportYas', { params: { appop: 'XY_UFO_PRD_DT_INFO', param, } }); this.$nextTick(() => { /* * @ description: 配置打开闲鱼导航栏右上角分享按钮 && 配置分享信息 && 上报数据埋点 * @ author: huzhiming * @ date: 2019-11-13 19:58:50 * @ version: v1.0.0 */ this.settingShareHandler(); }); }, deactivated() { if (this._resourceImgWatcher) { this._resourceImgWatcher(); this._resourceImgWatcher = null; } this.$xianyu.closeNavRightItem(); // 触发 关闭导航右侧分享按钮 }, beforeRouteUpdate(to, from, next) { if (this.historyBackGuard() === false) { return next(false); } next(); }, beforeRouteLeave(to, from, next) { if (this.historyBackGuard() === false) { return next(false); } next(); }, methods: { ...mapActions(['fetchProductInfo', 'fetchBrandTop', 'fetchFav', 'setupInitialProductInfo', 'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']), ...mapSecondActions(['fetchStorageCount']), historyBackGuard() { for (let key of Object.keys(this.actionSheetCloseMap)) { if (this[key]) { this[this.actionSheetCloseMap[key]](); return false; } } return true; }, refresh() { this.$refs.slide && this.$refs.slide.refresh && this.$refs.slide.refresh(); }, collectTrackingInfo(viewInfo, force) { if (!this.yasTargets) { this.yasTargets = {}; } // banner if (this.$refs.resourceImg && this.resource.url && (!this.yasTargets.banner || force)) { /** * 商品详情页中的资源位曝光 * XY_UFO_SHOW_EVENT * 1.P_NAME:当前页面名称,XY_UFOProductDetail; * 2.P_PARAM:当前页面资源位code; * 3.PRD_ID:商品ID; * 4.ACTION_URL:资源位跳转URL; */ this.yasTargets.banner = { el: { offsetTop: this.$refs.resourceImg.offsetTop, offsetHeight: this.$refs.resourceImg.offsetHeight, }, yasParams: { P_NAME: 'XY_UFOProductDetail', P_PARAM: this.resourceContentCode, PRD_ID: this.productId, ACTION_URL: this.resource.url, } }; } // 相关商品 if (this.$refs.topList && this.topList && (!this.yasTargets.topList0 || force)) { const elInfo = { offsetTop: this.$refs.topList.$el.offsetTop, offsetHeight: this.$refs.topList.$el.offsetHeight, }; /** * 1.P_NAME:页面名称,XY_UFOProductDetail; * 2.P_PARAM:页面参数; * 3.I_INDEX:曝光顺序; * 4.PRD_ID:商品id * 5.POS_ID: 1:相关商品,2: 推荐推荐,3: 相关商品列表页面 */ this.topList.slice(0, 3).forEach((value, i) => { this.yasTargets[`topList${i}`] = { el: elInfo, yasParams: { ...this.recommendYasParams, I_INDEX: i + 1, PRD_ID: value.id, POS_ID: 1 }, }; }); } // 推荐商品 if (this.$refs.recommendList && this.recommend && this.recommend.length > 0 && (!this.yasTargets.productItem0 || force)) { let productElList = document.querySelectorAll('.product-list-item'); if (productElList && productElList.length > 0) { this.recommend.forEach((item, i) => { if (productElList[i] && item) { const id = `productItem${i}`; this.yasTargets[id] = { el: { offsetTop: productElList[i].offsetTop, offsetHeight: productElList[i].offsetHeight, }, yasParams: { ...this.recommendYasParams, I_INDEX: i + 1, PRD_ID: item.id }, }; } }); } } }, yasResourceAvailable() { this.scrollEndHandler(); if (this._resourceImgWatcher) { this._resourceImgWatcher(); this._resourceImgWatcher = null; } }, sizeImg(src, width = 720, height = 144) { if (src) { return getImgUrl(src, width, height); } }, // 加载商品详情数据 loadData(productId = this.productId) { this.fetchBrandTop({ productId }); this.fetchFav({ productId }); }, /** * 登录|认证 * needCert: 需要实名认证 */ async auth(needCert = false) { if (needCert) { const authInfo = await this.$yoho.authRealName(); if (authInfo && authInfo.code === 403) { // 此时已经异步登录,当前页面取消业务处理 return; } return authInfo; } return this.$yoho.auth(); }, // toggle收藏 async _toggleFav() { const userInfo = await this.auth(); if (!userInfo) { return; } const isFav = !this.isFav; this.toggleFav({ productId: this.productId, isFav }).then(() => { const txt = isFav ? '收藏成功' : '取消收藏成功'; this.$createToast({ txt, type: 'txt', }).show(); this.$store.dispatch('reportYas', { params: { appop: 'XY_UFO_GDS_DT_FAV', param: { PRD_ID: this.productId, FAVTYPE: isFav ? 1 : 0 } } }); }); }, // 进入商品详情 gotoProduct({product, index}) { this.$router.push({ name: this.$route.name, params: { productId: product.id, productInfo: product, yasParams: { P_NAME: 'XY_UFOProductDetail', P_PARAM: this.productId, POS_ID: 1, } } }); this.$store.dispatch('reportYas', { params: { appop: 'XY_UFO_PRD_LIST_C', param: { P_NAME: 'XY_UFOProductDetail', P_PARAM: this.productId, POS_ID: 1, I_INDEX: index + 1, PRD_ID: product.id } } }); }, // 打开产品品牌或系列TOP gotoBrand() { this.$router.push({ name: 'BrandProductList', params: { productId: this.productId, }, }); }, // 显示活动列表 showActivity() { this.showActivitySheet = true; }, // 关闭活动列表 onActivitySheetHide() { this.showActivitySheet = false; }, // 选择尺寸 onSizeSelectSheetHide() { this.showSizeSelectSheet = false; }, // 购买 buy() { /** * 数据埋点 * 商品详情页点击出售/购买/求购按钮 * event: XY_UFO_PRD_DT_SALE_C * params: 1.TAB_ID:1-出售,2-购买,3-求购; * 2.PRD_ID:商品ID; */ this.$store.dispatch('reportYas', { params: { appop: 'XY_UFO_PRD_DT_SALE_C', param: { TAB_ID: 2, PRD_ID: this.productId }, } }); this.resetSelectedSize(); this.selectSizeConfig = { dest: 'OrderBuyConfirm', type: 'buy', title: '购买', btnTitle: '现货' }; this.showSizeSelectSheet = true; }, // 出售 async sell() { // 出售需要实名认证 const userInfo = await this.auth(true); if (!userInfo) { return; } // 商品是否指定出售 const limitInfo = get(this.productDetail, 'limitInfo', {}); if (limitInfo.isLimit === '1') { this.$createDialog({ type: 'alert', title: '商品出售限制', content: limitInfo.tip || '', confirmBtn: { text: '我知道了' } }).show(); return; } /** * 数据埋点 * 商品详情页点击出售/购买/求购按钮 * event: XY_UFO_PRD_DT_SALE_C * params: 1.TAB_ID:1-出售,2-购买,3-求购; * 2.PRD_ID:商品ID; */ this.$store.dispatch('reportYas', { params: { appop: 'XY_UFO_PRD_DT_SALE_C', param: { TAB_ID: 1, PRD_ID: this.productId }, } }); this.resetSelectedSize(); this.selectSizeConfig = { dest: 'OrderSellConfirm', type: 'sell', title: '出售', btnTitle: '出售', }; this.showSizeSelectSheet = true; }, // 选择出售或购买 async onSelectTradeProduct(tradeProduct) { /** * 数据埋点 * 购买确认订单 * 购买-选择尺码生成订单 * 商品详情页-选择尺码确认后上报 * 商品详情页点击出售/购买/求购按钮 * event: XY_UFO_PRD_DT_BUY_SEL_C * 1.PRD_ID:商品ID; * 2.PRD_SKU:商品SKU; * 3.PRD_SIZE:尺码; * 新增字段: * 4.ORD_TYPE:订单类型;1-出售,2-购买,3-求购,4-变现, 5-二手 */ const isSecond = tradeProduct.type === 'second'; this.$store.dispatch('reportYas', { params: { appop: 'XY_UFO_PRD_DT_BUY_SEL_C', param: { PRD_ID: tradeProduct.productId, PRD_SKU: tradeProduct.skup, PRD_SIZE: tradeProduct.size_id, ORD_TYPE: this.selectSizeConfig.type === 'buy' ? (isSecond ? 5 : 2) : 1 }, } }); if (this.selectSizeConfig.type === 'buy') { try { const info = await this.payment({ skup: tradeProduct.skup, }); /** * { * "message": "您有未支付的订单,支付或取消后可提交新的订单", * "code": 512 * } */ if (info.code === 512) { return this.$createDialog({ type: 'confirm', content: info.message, confirmBtn: { text: '查看订单', active: true, disabled: false, href: 'javascript:;' }, cancelBtn: { text: '取消', active: false, disabled: false, href: 'javascript:;' }, onConfirm: () => { this.showSizeSelectSheet = false; this.$router.push({ name: 'OrderList', params: { owner: this.selectSizeConfig.type, status: 2, // 待付款 }, }); }, }).show(); } } catch (e) { // e } } this.showSizeSelectSheet = false; if (isSecond) { const { data: count } = await this.fetchStorageCount({ storageId: tradeProduct.storageId }); if (count === 1) { // 跳转详情 this.$router.push({ name: 'SecondProductDetail', params: { skup: tradeProduct.skup, yasParams: { P_NAME: 'XY_UFO' + this.$route.name, PRD_ID: tradeProduct.productId } } }); } else if (count > 1) { // 跳转列表 this.$router.push({ name: 'SecondSellList', params: { id: tradeProduct.storageId, }, query: { pid: tradeProduct.productId } }); } } else { this.$router.push({ name: this.selectSizeConfig.dest, query: tradeProduct }); } }, // 添加尺寸 onRequestSize() { this.showSizeSelectSheet = false; this.showSizeRequestSheet = true; }, // 添加尺寸关闭 onSizeRequestHide() { this.showSizeRequestSheet = false; }, // 打开求购列表 qiugou() { this.showBidSheet = true; /** * 数据埋点 * 商品详情页点击出售/购买/求购按钮 * event: XY_UFO_PRD_DT_SALE_C * params: 1.TAB_ID:1-出售,2-购买,3-求购; * 2.PRD_ID:商品ID; */ this.$store.dispatch('reportYas', { params: { appop: 'XY_UFO_PRD_DT_SALE_C', param: { TAB_ID: 3, PRD_ID: this.productId, }, } }); }, // 购买 onBidSheetHide() { this.showBidSheet = false; }, // 资源位 gotoNewPage() { if (!this.resource || !this.resource.url) { return; } const url = this.resource.url; /** * 商品详情页中的资源位点击 * XY_UFO_GDS_DT_BANNER_C * 1.PRD_ID:商品ID * 2.ACTION_URL:跳转的URL */ this.$store.dispatch('reportYas', { params: { appop: 'XY_UFO_GDS_DT_BANNER_C', param: { PRD_ID: this.productId, ACTION_URL: url, }, } }); this.$xianyu.goXianyuNewPage({ url }); }, /* * @ description: 配置打开闲鱼导航栏右上角分享按钮 && 配置分享信息 && 上报数据埋点 * @ author: huzhiming * @ date: 2019-11-13 20:00:55 * @ version: v1.0.0 */ async settingShareHandler() { /* * @ description: [数据上报]@hooks: 分享链接进入pv,查看闲鱼淘口令,地址栏会附带shareUserId参数,目前淘口令查看事件未知,后期若知道淘口令打开事件可调整此数据埋点 * @ author: huzhiming * @ date: 2019-11-13 20:36:00 * @ version: v1.0.0 */ if (get(this.$route, 'query.shareUserId', '') !== '') { this.$store.dispatch('reportYas', { params: { appop: 'XY_SHARE_SUCCESS_L', param: { SHARE_TYPE: '淘口令', SHARE_URL: location.href } } }); } let image = this.sizeImg(get(this.imageList, '[0].image_url', ''), 200, 200), yasReportHandler = { // [数据上报]@hooks: 拉起分享弹窗触发 XY_SHARE_PRODUCT: () => { this.$store.dispatch('reportYas', { params: { appop: 'XY_SHARE_PRODUCT', param: { PRD_ID: this.productId, SHARE_URL: location.href } } }); }, // [数据上报]@hooks: 点击对应分享平台触发 XY_SHARE_TYPE: (data) => { this.$store.dispatch('reportYas', { params: { appop: 'XY_SHARE_TYPE', param: { SHARE_TYPE: data.pluginKey, SHARE_URL: location.href } } }); } }; this.$xianyu.setNavRightItem({ shareType: 'activity', // 类型,默认activity image, url: `${location.href}?isNeedRefresh=false`, // 分享链接 link: `${location.href}?isNeedRefresh=false`, // 和url保持 title: `淘口令#${this.productDetail.product_name}`, // 分享标题 text: '' // 分享描述 }, yasReportHandler); }, onVideoPlay() { this.$refs.videoPlayer.parentHandleclick(); } }, }; </script> <style lang="scss" scoped> @import "./product-detail"; .video-mask { z-index: 10; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .video-player { display: block; height: 100%; width: 100%; opacity: 0; position: absolute; bottom: 0; overflow: hidden; /deep/ .video-js { padding: 0; height: 100%; } } .video-resource { margin-top: 30px; position: relative; overflow: hidden; } .cube-btn { border-radius: 0; } .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 300ms linear; } .slide { height: 520px; .square-img-container { display: block; width: 520px; height: 520px; margin: 0 auto; } /deep/ .cube-slide-dots { margin-bottom: -2px; } .dot-wrap { padding-bottom: 10px; } .cube-dot { display: inline-block; width: 4px; height: 4px; margin: 0 5px; background: rgba(0, 0, 0, 0.15); border-radius: 50%; &.active { transform-origin: 50% 50%; transform: scale(1.5); background: rgba(0, 0, 0, 1); } } .qiugou { position: absolute; top: 0; right: 58px; width: 58px; height: 48px; background: top left url("~statics/image/product/qiugou@3x.png") no-repeat; background-size: 100% 100%; } } .cube-slide-item { img { margin: 0 auto; } } .banner { display: block; min-height: 132px; img { display: block; width: 100%; height: 100%; } } .banner-title { /* font-family: PingFang-SC-Light; */ border: 1px solid #000; font-size: 30px; line-height: 100px; text-align: center; } .info-promote { display: flex; align-items: center; justify-content: right; span { display: inline-block; border: 1px solid #feabac; color: #d0021b; line-height: 1.8; margin-right: 15px; font-size: 0.8em; padding: 0 1.2em; } i { color: #999; } } .info-basic { padding: 46px 40px 30px; .info-price { color: #d0021b; font-size: 48px; @include num; font-weight: bold; line-height: 56px; height: 56px; text-align: center; letter-spacing: 0; i { font-style: normal; font-size: 36px; } } .info-name { margin-top: 14px; color: #999; text-align: center; height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; div { font-size: 28px; font-weight: bold; line-height: 32px; max-height: 64px; white-space: normal; word-break: break-all; } } } .info { padding: 0 40px; &-list { line-height: 104px; // PM: 60 -> 52 white-space: nowrap; &-item { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; font-size: 28px; box-sizing: border-box; } &-name { /* font-family: PingFang-SC-Regular; */ color: #999; } &-value { /* font-family: SFProText-Medium; */ color: #000; letter-spacing: 0; font-weight: bold; } } .ref-img { margin-top: 40px; width: 670px; height: 100px; } } .ref-img { display: block; width: 750px; height: 628px; } .recommend { padding-top: 20px; background-color: #f2f2f2; background-image: linear-gradient(180deg, #fefefe 0%, #f2f2f2 320px); h2 { font-size: 36px; font-weight: bold; line-height: 50px; padding: 20px 0 0; margin: 0 40px; } } .layout-context { display: flex; flex-direction: column; } .cube-scroll-wrapper { flex: 1 0 0; overflow: scroll; -webkit-overflow-scrolling: touch; } .footer { display: flex; text-align: center; padding: 16px 30px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); @include cube-ufo-btn; button { height: 80px; } .fav { margin-right: auto; text-align: center; width: 48px; color: #888; line-height: 0; .icon-star-fill, .icon-star-outline { font-size: 48px; line-height: 48px; } span { display: inline-block; font-size: 22px; line-height: 32px; } .icon-star-outline { color: #b2b2b2; } .icon-star-fill { color: #002b47; } } .sell, .buy { flex: 0 0 6em; } } .info-list-item { transition: all 0.1s; } .info-list-enter, .info-list-leave-to { opacity: 0; transform: translateX(-30%); } .info-list-leave-active { position: absolute; } </style>