<template>
|
<view class="product-detail pr" :data-theme='theme()' :class="theme() || ''">
|
<scroll-view scroll-y="true" class="scroll-Y scroll-box" :style="'height:' + scrollviewHigh + 'px;'" v-if="!loadding">
|
<!--图片-->
|
<view class="product-pic" v-if="detail.image_list.length > 0">
|
<swiper
|
class="swiper"
|
indicator-active-color="#ffffff"
|
indicator-color="rgba(255,255,255,.3)"
|
:indicator-dots="indicatorDots"
|
:autoplay="autoplay"
|
:interval="interval"
|
:duration="duration"
|
>
|
<swiper-item v-for="(item, index) in detail.image_list" :key="index"><image @click="yulan(detail.image_list,index)" :src="item.file_path" mode="aspectFit"></image></swiper-item>
|
</swiper>
|
</view>
|
|
<!--基本信息-->
|
<view class="bg-white p30 mb22">
|
<view class="product-name text-ellipsis-2">
|
<span class="category">{{ detail.category.name }}</span>{{ detail.name }}
|
</view>
|
<view class="product-describe"><text v-if="detail.product_type == 0">预算</text><text v-else>价格</text>一 ￥{{ detail.price }}</view>
|
<view class="product-describe"><text v-if="detail.product_type == 0">期望完成时间</text><text v-else>交付时间</text>一 {{ detail.finish_time }}</view>
|
<view class="product-describe"><text v-if="detail.product_type == 0">期望地点</text><text v-else>服务地区</text>一 {{ detail.detail }}</view>
|
<view class="product-describe" v-if="detail.product_type == 0 && detail.show_phone == 1"><text>电话</text>一 {{ user.mobile }}</view>
|
<view class="product-describe" v-if="detail.tag_list.length > 0">
|
<text>标签</text>一 <span class="tag" v-for="(item, index) in detail.tag_list" :key="index">{{ item.name}}</span>
|
</view>
|
</view>
|
|
|
<!--详情内容-->
|
<view class="product-content">
|
<view class="p-0-30 border-b-e">
|
<view class="group-hd d-s-c"><text class="min-name f28">详情描述</text></view>
|
</view>
|
<view class="content-box" v-html="detail.content"></view>
|
</view>
|
|
<!--产品介绍-->
|
<view class="product-content">
|
<view class="p-0-30 border-b-e">
|
<view class="group-hd d-s-c"><text class="min-name f28">产品介绍</text></view>
|
</view>
|
<view class="content-box" v-html="detail.product_content"></view>
|
</view>
|
|
<!--产品案例-->
|
<view class="product-content">
|
<view class="p-0-30 border-b-e">
|
<view class="group-hd d-s-c"><text class="min-name f28">产品应用案例</text></view>
|
</view>
|
<view class="content-box" v-html="detail.product_case"></view>
|
</view>
|
|
|
<!--评论-->
|
<view class="product-comment">
|
<view class="p-0-30 d-b-c">
|
<view class="group-hd left">
|
<text class="min-name f28">评论</text>
|
</view>
|
<view class="right" @click="lookEvaluate(detail.project_id)">
|
<text class="more">查看全部</text>
|
<text class="icon iconfont icon-jiantou" style="font-size: 22rpx;color: #9A9A9A;"></text>
|
</view>
|
</view>
|
<view class="comment-list" v-if="detail.evaluate.length > 0">
|
<view class="item" v-if="index<=2" v-for="(item, index) in detail.evaluate" :key="index">
|
<view class="cmt-user">
|
<view class="left">
|
<image class="photo" :src="item.user.avatarUrl" mode="aspectFill"></image>
|
<text class="name">{{ item.user.nickName }}</text>
|
</view>
|
<text class="datetime">{{ item.create_time }}</text>
|
</view>
|
<view class="mt20 lh150 f24">{{ item.evaluate_content }}</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="sage-bottom"></view>
|
|
|
</scroll-view>
|
|
<!--底部按钮-->
|
<view class="btns-wrap">
|
<view class="icon-box d-c-c" @click="gotoPage('/pages/index/index')">
|
<button class="d-c-c d-c bg-white">
|
<text class="btn_btom pr icon iconfont icon-Homehomepagemenu gray3" style="height: 50rpx;line-height: 60rpx;"></text>
|
<text class="f22 gray3" style="height: 50rpx;line-height: 40rpx;">首页</text>
|
</button>
|
</view>
|
<view class="icon-box d-c-c">
|
<button class="d-c-c d-c bg-white" @click="jump()">
|
<text class="icon iconfont icon-kefu2 gray3" style="height: 50rpx;line-height: 60rpx;"></text>
|
<text class="f22 gray3" style="height: 50rpx;line-height: 40rpx;">咨询</text>
|
</button>
|
</view>
|
<template>
|
<template>
|
<button class="buy" @click="onEva()">我要评论</button>
|
</template>
|
</template>
|
</view>
|
|
|
<!-- 评论 -->
|
<Evaluate :isEva="isEva" :project_id="detail.project_id" @close="closeEva"></Evaluate>
|
|
<!--支付选择-->
|
<Popup :show="isPayPopup" msg="支付方式" @hidePopup="hidePopupFunc">
|
<!--支付方式-->
|
<view class="buy-checkout ww100">
|
<view :class="pay_type == 20 ? 'item active border-b-e' : 'item border-b-e'" @click="payTypeFunc(20)">
|
<view class="d-s-c">
|
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-weixin"></span></view>
|
<text class="key">微信支付</text>
|
</view>
|
<view class="icon-box d-c-c"></view>
|
</view>
|
<view :class="pay_type == 10 ? 'item active' : 'item'" @click="payTypeFunc(10)">
|
<view class="d-s-c">
|
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-yue"></span></view>
|
<text class="key">余额支付</text>
|
</view>
|
<view class="icon-box d-c-c"></view>
|
</view>
|
<view :class="pay_type == 40 ? 'item active' : 'item'" @click="payTypeFunc(40)">
|
<view class="d-s-c">
|
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-yue"></span></view>
|
<text class="key">线下支付</text>
|
</view>
|
<view class="icon-box d-c-c"></view>
|
</view>
|
</view>
|
<view class="bts"></view>
|
</Popup>
|
|
</view>
|
</template>
|
|
<script>
|
import utils from '@/common/utils.js';
|
import Popup from '@/components/uni-popup.vue';
|
import Evaluate from './popup/evaluate';
|
import {
|
pay
|
} from '@/common/pay.js';
|
export default {
|
components: {
|
Popup,
|
Evaluate,
|
},
|
data() {
|
return {
|
statusBarHeight: 0,
|
titleBarHeight: 0,
|
store_open: 1,
|
store:[],
|
/*手机高度*/
|
phoneHeight: 0,
|
/*可滚动视图区域高度*/
|
scrollviewHigh: 0,
|
/*是否加载完成*/
|
loadding: true,
|
/*是否显示面板指示点*/
|
indicatorDots: false,
|
/*是否知道切换*/
|
autoplay: false,
|
/*自动切换时间间隔*/
|
interval: 2000,
|
/*滑动动画时长*/
|
duration: 500,
|
/*项目id*/
|
project_id: null,
|
/*项目详情*/
|
detail: {},
|
user:{},
|
/*是否显示支付类别弹窗*/
|
isPayPopup: false,
|
/*支付方式*/
|
pay_type: 20,
|
payData:[],
|
topay:false,
|
isEva:false,
|
};
|
},
|
onLoad(e) {
|
/*id*/
|
this.GetStatusBarHeight();
|
this.project_id = e.project_id ? e.project_id : 0;
|
},
|
onReady() {
|
this.init();
|
/*获取详情*/
|
//this.getData();
|
},
|
onShow(){
|
let self = this;
|
let options = wx.getEnterOptionsSync();
|
// 从半屏小程序返回时执行
|
if (options.scene == '1038') {
|
self.onPayResult(options.referrerInfo.extraData);
|
}
|
/*数据*/
|
self.getData();
|
},
|
methods: {
|
// 半屏小程序返回
|
onPayResult(e) {
|
let self = this;
|
if (e.pay_result == 'success') {
|
self.showSuccess('支付成功！',function(){
|
self.gotoPage('/pages3/release/demandorder/index', 'redirect');
|
});
|
} else {
|
if(self.topay){
|
//兼容半屏跳转
|
}else{
|
self.showError('支付失败');
|
}
|
}
|
},
|
GetStatusBarHeight() {
|
// #ifdef MP-WEIXIN
|
let that = this;
|
const SystemInfo = uni.getSystemInfoSync();
|
let statusBarHeight = SystemInfo.statusBarHeight;
|
this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
|
this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
|
// #endif
|
// #ifndef MP-WEIXIN
|
const SystemInfo = uni.getSystemInfoSync();
|
this.statusBarHeight = SystemInfo.statusBarHeight;
|
this.titleBarHeight = 30;
|
// #endif
|
},
|
/*初始化*/
|
init() {
|
let _this = this;
|
uni.getSystemInfo({
|
success(res) {
|
_this.phoneHeight = res.windowHeight;
|
// 计算组件的高度
|
let view = uni.createSelectorQuery().select('.btns-wrap');
|
view.boundingClientRect(data => {
|
let h = _this.phoneHeight - data.height;
|
//#ifdef MP-WEIXIN
|
h = _this.phoneHeight;
|
//#endif
|
_this.scrollviewHigh = h;
|
}).exec();
|
}
|
});
|
},
|
|
/*获取数据*/
|
getData() {
|
let self = this;
|
let product_id = self.product_id;
|
uni.showLoading({
|
title: '加载中'
|
});
|
self._get(
|
'plus.release.project/detail',
|
{
|
project_id: self.project_id,
|
},
|
function(res) {
|
/*详情内容格式化*/
|
res.data.detail.content = utils.format_content(res.data.detail.content);
|
self.detail = res.data.detail;
|
self.user = res.data.user;
|
self.loadding = false;
|
uni.hideLoading();
|
});
|
},
|
|
/*评论*/
|
onEva: function(e) {
|
let self = this;
|
self.isEva = true;
|
},
|
|
/*关闭评论*/
|
closeEva: function(e) {
|
let self = this;
|
self.getData();
|
self.isEva = false;
|
},
|
|
/*查看更多评论*/
|
lookEvaluate(project_id) {
|
this.gotoPage('/pages3/release/project/look-evaluate/look-evaluate?project_id=' + project_id);
|
},
|
|
|
/*隐藏支付方式*/
|
hidePopupFunc() {
|
this.isPayPopup = false;
|
},
|
/*去支付*/
|
payTypeFunc(payType) {
|
let self = this;
|
self.isPayPopup = false;
|
uni.showLoading({
|
title: '加载中'
|
});
|
self._post(
|
'plus.release.order/submit', {
|
pay_type: payType,
|
pay_source: self.getPlatform(),
|
project_id: self.project_id,
|
//formData: JSON.stringify(formData),
|
},
|
function(res) {
|
self.payData = res;
|
// 半屏小程序支付
|
if (res.data.payment.is_embed) {
|
// console.log(res.data.payment);
|
uni.openEmbeddedMiniProgram({
|
appId: res.data.payment.embed_app_id,
|
path: res.data.payment.embed_path,
|
extraData: res.data.payment.extraData,
|
envVersion: 'release', // develop开发版 trial体验版 release正式版
|
success:function() {
|
console.log('打开半屏小程序成功');
|
},
|
fail:function() {
|
console.log('打开半屏小程序失败');
|
}
|
});
|
return;
|
}
|
pay(res, self, function() {
|
uni.hideLoading();
|
self.showSuccess('创建成功！',function(){
|
self.gotoPage('/pages3/release/demandorder/index', 'redirect');
|
});
|
}, function() {
|
uni.hideLoading();
|
self.showError('提交失败');
|
});
|
}
|
);
|
},
|
/*支付方式选择*/
|
onPayOrder() {
|
let self = this;
|
if(self.detail.project_type == 1){
|
//接供求项目支付订单
|
self.isPayPopup = true;
|
}else{
|
//接需求项目创建订单
|
uni.showLoading({
|
title: '加载中'
|
});
|
self._post(
|
'plus.release.order/createOrder', {
|
project_id: self.project_id,
|
},
|
function(res) {
|
uni.hideLoading();
|
self.showSuccess('创建成功！',function(){
|
self.gotoPage('/pages3/release/supplyorder/index', 'redirect');
|
});
|
|
}
|
);
|
|
}
|
|
},
|
|
jump() {
|
let self = this;
|
let you_user_id = self.user.user_id;
|
let nickname = self.user.user.nickName;
|
let avatarurl = self.user.user.avatarUrl;
|
this.gotoPage('/pages3/release/chat/chat?you_user_id='+you_user_id+'&nickname='+nickname+'&avatarurl='+avatarurl);
|
},
|
|
|
goback() {
|
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
if (routes.length <= 1) {
|
this.gotoPage('/pages/index/index');
|
} else {
|
uni.navigateBack();
|
}
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
page {
|
background: #f2f2f2;
|
}
|
.product-detail {
|
}
|
|
.product-detail .product-pic,
|
.product-detail .product-pic .swiper,
|
.product-detail .product-pic image {
|
width: 750rpx;
|
height: 750rpx;
|
}
|
|
.product-detail .price-wrap {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.product-detail .price-wrap .left {
|
display: flex;
|
justify-content: flex-start;
|
align-items: flex-end;
|
}
|
|
.product-detail .price-wrap .new-price {
|
@include font_color('price_color');
|
font-size: 30rpx;
|
font-weight: bold;
|
margin-right: 14rpx;
|
}
|
.product-detail .persona_price {
|
color: #e7032c;
|
font-weight: bold;
|
line-height: 20px;
|
}
|
.fn{
|
font-weight: normal;
|
}
|
.product-detail .price-wrap .new-price .num {
|
padding: 0 4rpx;
|
font-size: 40rpx;
|
}
|
|
.product-detail .price-wrap .old-price {
|
font-size: 26rpx;
|
color: #999999;
|
text-decoration: line-through;
|
}
|
|
.product-detail .already-sale {
|
font-size: 24rpx;
|
color: #999999;
|
}
|
|
.product-detail .product-name {
|
padding-top: 26rpx;
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #333333;
|
|
}
|
|
.scroll-box {
|
padding-bottom: env(safe-area-inset-bottom);
|
box-sizing: border-box;
|
}
|
|
.product-detail .product-describe {
|
/* padding: 18rpx; */
|
line-height: 30rpx;
|
font-size: 26rpx;
|
color: #666666;
|
word-break: break-all;
|
margin-top: 28rpx;
|
}
|
|
.already-choice {
|
background: #ffffff;
|
}
|
|
.already-choice .center-content {
|
line-height: 90rpx;
|
}
|
|
.product-comment,
|
.product-content {
|
margin-top: 20rpx;
|
background: #ffffff;
|
border-bottom: 1rpx solid #fff;
|
}
|
|
.product-content .content-box p image {
|
width: 100%;
|
}
|
|
.product-content .content-box {
|
padding:5rpx 40rpx;
|
font-size: 30rpx;
|
}
|
|
.sage-bottom {
|
width: 100%;
|
height: calc(100rpx + env(safe-area-inset-bottom));
|
}
|
|
.btns-wrap {
|
position: fixed;
|
height: 100rpx;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
display: flex;
|
background: #ffffff;
|
align-items: center;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.btns-wrap .icon-box {
|
width: 92rpx;
|
height: 100rpx;
|
}
|
|
.btns-wrap .icon-box .iconfont {
|
font-size: 40rpx;
|
color: #888888;
|
}
|
|
.btns-wrap .icon-box .iconfont .num {
|
position: absolute;
|
top: 10rpx;
|
left: 50%;
|
height: 30rpx;
|
min-width: 30rpx;
|
overflow: hidden;
|
line-height: 32rpx;
|
border-radius: 15rpx;
|
font-size: 20rpx;
|
color: #ffffff;
|
background: red;
|
}
|
|
.btns-wrap button,
|
.btns-wrap button:after {
|
height: 100rpx;
|
line-height: 100rpx;
|
margin: 0;
|
padding: 0;
|
flex: 1;
|
border-radius: 0;
|
border: 0;
|
}
|
|
.btns-wrap button.add-cart {
|
font-size: 28rpx;
|
width: 214rpx;
|
height: 75rpx;
|
line-height: 75rpx;
|
border-top-left-radius: 40rpx;
|
border-bottom-left-radius: 40rpx;
|
margin-left: 17rpx;
|
@include font_color('text_color2');
|
@include background_linearmore('cart_left1', 'cart_left2', 'left_deg', 0%, 100%);
|
}
|
|
.btns-wrap button.add-cart-no {
|
font-size: 28rpx;
|
width: 214rpx;
|
height: 75rpx;
|
line-height: 75rpx;
|
border-top-left-radius: 40rpx;
|
border-bottom-left-radius: 40rpx;
|
color: #FFFFFF;
|
margin-left: 17rpx;
|
background: #CCCCCC;
|
}
|
|
.btns-wrap button.buy {
|
font-size: 28rpx;
|
width: 214rpx;
|
height: 75rpx;
|
line-height: 75rpx;
|
border-radius: 40rpx;
|
margin-right: 30rpx;
|
@include font_color('text_color1');
|
@include background_linearmore('cart_right1', 'cart_right2', 'right_deg', 0%, 100%);
|
}
|
.btns-wrap button.buy.ispresale {
|
line-height: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
.red {
|
color: #f6220c !important;
|
}
|
|
.shoucang-box {
|
position: fixed;
|
padding-right: 10rpx;
|
width: 80rpx;
|
height: 80rpx;
|
right: 0;
|
bottom: 270rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 16rpx 0 0 16rpx;
|
background: rgba(0, 0, 0, 0.8);
|
}
|
|
.shoucang-box button {
|
padding: 0;
|
background: 0;
|
line-height: 60rpx;
|
}
|
|
.shoucang-box .iconfont {
|
margin-bottom: 10rpx;
|
font-size: 50rpx;
|
color: #ffffff;
|
position: relative;
|
top: 5rpx;
|
}
|
|
.share-box {
|
position: absolute;
|
width: 60rpx;
|
height: 60rpx;
|
right: 0;
|
bottom: -16rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.share-box button {
|
padding: 0;
|
background: 0;
|
line-height: 60rpx;
|
border-radius: 0;
|
}
|
|
.share-box .iconfont {
|
margin-bottom: 10rpx;
|
font-size: 50rpx;
|
color: #ffffff;
|
}
|
|
.sc-box {
|
position: absolute;
|
width: 60rpx;
|
height: 60rpx;
|
right: 78rpx;
|
bottom: -16rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.sc-box button {
|
padding: 0;
|
background: 0;
|
line-height: 60rpx;
|
border-radius: 0;
|
}
|
|
.sc-box .iconfont.icon {
|
font-size: 38rpx;
|
}
|
|
.create-img {
|
width: 100%;
|
padding: 20rpx;
|
box-sizing: border-box;
|
}
|
|
.create-img image {
|
width: 100%;
|
}
|
|
.create-img button {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
border-radius: 44rpx;
|
box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, 0.6);
|
}
|
|
.shop_head_info {
|
margin: 20rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: white;
|
border-radius: 12rpx;
|
}
|
|
.shop_list_body_item_shop {
|
width: 100%;
|
height: 120rpx;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.shop_list_body_item_shop_logo {
|
width: 120rpx;
|
height: 120rpx;
|
}
|
|
.shop_list_body_item_shop_logo image {
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.1);
|
border-radius: 12rpx;
|
}
|
|
.shop_list_body_item_shop_info {
|
box-sizing: border-box;
|
margin-left: 20rpx;
|
padding-top: 0;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
}
|
|
.shop_list_body_item_shop_others {
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
text-align: right;
|
padding-top: 0;
|
}
|
|
.shop_list_body_item_shop_others button {
|
width: 160rpx;
|
height: 60rpx;
|
border: 1rpx solid #F6220C;
|
border-radius: 30rpx;
|
line-height: 60rpx;
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #F6220C;
|
text-align: center;
|
padding: 0;
|
background-color: #ffffff;
|
}
|
|
.h1 {
|
font-size: 32rpx;
|
}
|
|
.h2 {
|
font-size: 28rpx;
|
}
|
|
.h3 {
|
font-size: 24rpx;
|
}
|
|
.h4 {
|
font-size: 20rpx;
|
}
|
|
.h5 {
|
font-size: 16rpx;
|
}
|
|
.h6 {
|
font-size: 12rpx;
|
}
|
|
.collect text {
|
color: #f6220c;
|
}
|
|
.store_type {
|
display: inline-block;
|
background-color: #f6220c;
|
color: #FFFFFF;
|
border-radius: 7rpx;
|
font-weight: 200;
|
height: 35rpx;
|
line-height: 35rpx;
|
font-size: 21rpx;
|
padding: 0 10rpx;
|
margin-right: 20rpx;
|
}
|
|
.share_img {
|
width: 42rpx;
|
height: 42rpx;
|
margin: 0 auto;
|
margin-bottom: 4rpx;
|
}
|
|
.share_img.img_gray {
|
-webkit-filter: grayscale(100%);
|
filter: grayscale(100%);
|
}
|
|
.share_text {
|
line-height: 34rpx;
|
}
|
|
.reg180 {
|
padding-right: 20rpx;
|
text-align: center;
|
transform: rotateY(180deg);
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
|
.header {
|
z-index: 99;
|
position: fixed;
|
height: 30px;
|
line-height: 30px;
|
top: 0;
|
left: 0;
|
width: 100%;
|
padding-top: var(--status-bar-height);
|
}
|
|
.header .reg180 .icon-jiantou {
|
color: #FFFFFF;
|
background: rgba($color: #000000, $alpha: 0.6);
|
display: block;
|
width: 44rpx;
|
height: 44rpx;
|
line-height: 44rpx;
|
border-radius: 50%;
|
}
|
|
.btn_btom {
|
height: 90rpx;
|
line-height: 45rpx;
|
}
|
|
.btnname {
|
position: absolute;
|
bottom: -16px;
|
left: 0;
|
right: 0;
|
}
|
|
.icon-dianpu1 {
|
color: #333333;
|
}
|
|
.icon-kefu2 {
|
color: #333333;
|
}
|
|
.coupon_item {
|
height: 40rpx;
|
line-height: 40rpx;
|
border-radius: 6rpx;
|
background-color: #fff2f1;
|
color: #f6220c;
|
padding: 0 16rpx;
|
text-align: center;
|
font-size: 22rpx;
|
margin-left: 10rpx;
|
}
|
|
.pro_nameline {
|
width: 4rpx;
|
height: 24rpx;
|
background-color: #f6220c;
|
margin-right: 12rpx;
|
}
|
|
.icon.icon-shoucang {
|
font-size: 34rpx;
|
}
|
|
.icon-shoucang.gray3 {
|
color: #333333;
|
}
|
|
.cart_num {
|
position: absolute;
|
background: #f6220c;
|
width: 30rpx;
|
height: 30rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 22rpx;
|
border-radius: 50%;
|
color: #ffff;
|
right: 4rpx;
|
top: 4rpx;
|
}
|
|
.video {
|
width: 100%;
|
height: 100%;
|
}
|
.product-detail .product-pic .swiper .icon-bofang {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
margin: auto;
|
font-size: 48rpx;
|
color: #FFFFFF;
|
border-radius: 50%;
|
border: 4rpx solid #FFFFFF;
|
width: 120rpx;
|
height: 120rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-color: #00000080;
|
padding-left: 16rpx;
|
box-sizing: border-box;
|
z-index: 10;
|
}
|
|
.group-hd {
|
position: relative;
|
padding-left: 24rpx;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
|
.text-box {
|
padding: 2rpx 6rpx;
|
background-color: #fbe9e7;
|
color: #fd5342;
|
margin-right: 10rpx;
|
border-radius: 4rpx;
|
font-size: 20rpx;
|
height: 32rpx;
|
line-height: 32rpx;
|
}
|
}
|
|
.group-hd.d-b-s {
|
height: auto;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
}
|
.text-box {
|
padding: 2rpx 6rpx;
|
background-color: #fbe9e7;
|
color: #fd5342;
|
margin-right: 10rpx;
|
border-radius: 4rpx;
|
font-size: 20rpx;
|
height: 32rpx;
|
line-height: 32rpx;
|
}
|
|
.group-hd::after {
|
content: '';
|
width: 8rpx;
|
height: 33rpx;
|
position: absolute;
|
top: 30rpx;
|
left: 0;
|
@include background_linear('titleft1', 'titleft2', 180deg, 0%, 100%);
|
}
|
|
.hide.group-hd::after {
|
width: 0;
|
}
|
|
.group-hd .line-h-90 {
|
line-height: 90rpx;
|
}
|
|
.group-hd .line-h-50 {
|
line-height: 50rpx;
|
}
|
|
.text-coupon-list {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
|
.text-coupon-box {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 32rpx;
|
border: 1rpx solid #DDDDDD;
|
border-radius: 5rpx;
|
position: relative;
|
box-sizing: border-box;
|
padding: 0 16rpx;
|
}
|
|
.text-coupon {
|
color: #FF5649;
|
font-size: 18rpx;
|
}
|
|
.text-coupon-left {
|
position: absolute;
|
left: -5rpx;
|
width: 10rpx;
|
height: 10rpx;
|
border-radius: 50%;
|
border-right: 1rpx solid #DDDDDD;
|
z-index: 0;
|
background: #ffffff;
|
}
|
|
.text-coupon-right {
|
position: absolute;
|
right: -5rpx;
|
width: 10rpx;
|
height: 10rpx;
|
border-radius: 50%;
|
border-left: 1rpx solid #DDDDDD;
|
z-index: 0;
|
background: #ffffff;
|
}
|
|
/* 预售 */
|
.product-detail .limited-spike {
|
position: relative;
|
z-index: 2;
|
margin-top: -112rpx;
|
padding: 0 35rpx;
|
color: #ffffff;
|
background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
|
border-radius: 15rpx;
|
height: 278rpx;
|
padding: 40rpx 21rpx;
|
box-sizing: border-box;
|
}
|
|
.product-detail .limited-spike .left-name {
|
font-size: 22rpx;
|
color: #ffffff;
|
}
|
|
.product-detail .limited-spike .right-time {
|
position: absolute;
|
right: 20rpx;
|
top: 58rpx;
|
}
|
|
.product-detail .limited-spike .right-time .jiantou {
|
width: 20rpx;
|
height: 20rpx;
|
margin-left: 9rpx;
|
}
|
|
.mt-down-box {
|
margin-top: -107rpx;
|
z-index: 3;
|
position: relative;
|
border-radius: 15rpx;
|
min-height: 68rpx;
|
}
|
|
.tips-box {
|
margin-left: 8rpx;
|
height: 40rpx;
|
line-height: 40rpx;
|
padding: 0 24rpx 0 14rpx;
|
box-sizing: border-box;
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
background-color: rgba($color: #ffffff, $alpha: 0.45);
|
border-radius: 20rpx;
|
}
|
|
.product-detail .product-presale {
|
padding: 26rpx;
|
line-height: 40rpx;
|
font-size: 26rpx;
|
color: #666666;
|
background-color: rgba($color: #31C19E, $alpha: 0.1);
|
border-radius: 12rpx;
|
word-break: break-all;
|
margin-top: 28rpx;
|
}
|
.staff_item{
|
background-color: #f6f6f6;
|
border-radius: 10rpx;
|
}
|
.staff-image {
|
width: 108rpx;
|
height: 108rpx;
|
}
|
.tag{
|
padding:2rpx 5rpx;
|
margin-right: 5rpx;
|
border:1px solid red;
|
color:red;
|
}
|
.category{ padding:4rpx 5rpx; margin-right: 5rpx; background: red; color: #fff;}
|
.product-describe text{
|
font-size: 25rpx;
|
display: block;
|
font-weight: bold;
|
margin-bottom: 5rpx;
|
}
|
</style>
|
