729 lines
22 KiB
Vue
729 lines
22 KiB
Vue
<template>
|
||
<div class="agricultural-detail-warp">
|
||
<common current-name="agricultural">
|
||
<template #main>
|
||
<div class="agricultural-detail-info">
|
||
<div class="top-info">
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<banner
|
||
v-if="currentGood.goodUrls.length > 0"
|
||
name="landdetail"
|
||
:imglist="currentGood.goodUrls"
|
||
:is-montage="false"
|
||
indicator-pos="none"
|
||
arrow="always"
|
||
height="340px"
|
||
:is-view="true"
|
||
>
|
||
</banner>
|
||
</el-col>
|
||
<el-col :span="12" class="top-info-txt">
|
||
<h1 class="title">{{ currentGood.goodName }}</h1>
|
||
<div class="price-sold">
|
||
<span class="price">{{ currentPrice }}</span>
|
||
<span class="sold">{{ currentGood.salesVolume }}</span>
|
||
</div>
|
||
<div class="tips-list">
|
||
<el-row :gutter="16">
|
||
<el-col :span="24">发货地址：{{ currentGood.detailAddress }}</el-col>
|
||
<el-col :span="24"
|
||
>保 障：{{
|
||
currentGood.safeguard ? currentGood.safeguard.options[0].text : ''
|
||
}}</el-col
|
||
>
|
||
</el-row>
|
||
</div>
|
||
<div class="spu-sku-list">
|
||
<div class="spu-title">规格：</div>
|
||
<div class="spu-sku-warp">
|
||
<div
|
||
v-for="(item, index) in currentGood.netWeight"
|
||
:key="index"
|
||
class="spu-sku-item"
|
||
:class="[index === currentWeight ? 'act' : 'normal']"
|
||
@click="currentWeight = index"
|
||
>
|
||
{{ item.goodSpecs }}{{ item.unit }}
|
||
</div>
|
||
</div>
|
||
<div class="goods-num">
|
||
<div class="num-title">数量：</div>
|
||
<div class="num-warp">
|
||
<el-input-number v-model="saveInfo.num" :min="1" :max="10" />
|
||
<span v-if="currentStock !== 0" class="is-have">有货: {{ currentStock }}</span>
|
||
<span v-else class="is-have">售罄</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-btn">
|
||
<div class="item-btn sign" @click="buyGood">
|
||
<span>立即购买</span>
|
||
</div>
|
||
<div class="item-btn reservation" @click="addGoodToCart">
|
||
<span>加入购物车</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<signProcess></signProcess>
|
||
</div>
|
||
|
||
<div class="agricultural-detail-content">
|
||
<div class="detail-content">
|
||
<div class="tab-top">
|
||
<el-radio-group v-model="tabVal">
|
||
<el-radio-button v-for="(t, indext) in tabList" :key="t.name" :value="t.value">{{ t.label }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
|
||
<div class="tab-content">
|
||
<div v-if="tabVal === 'detail'" class="content-detail">
|
||
<div v-if="showDetail" style="display: flex; justify-content: center">
|
||
<el-descriptions class="detail-des" title=" " :column="2" size="large" border>
|
||
<el-descriptions-item v-for="item in currentGood.attribute" :key="item.key">
|
||
<template #label>
|
||
<div class="cell-item">{{ item.value.name }}</div>
|
||
</template>
|
||
<span>{{ item.value.value }}</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div style="display: flex; justify-content: center; flex-wrap: wrap">
|
||
<el-image
|
||
v-for="(item, index) in currentGood.detailUrl"
|
||
:key="index"
|
||
:src="item"
|
||
style="width: 90%; margin: 5px 0"
|
||
fit="contain"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div v-if="tabVal == 'sourceCode'" class="content-source-code">
|
||
<div class="code-warp">
|
||
<div class="code-img">
|
||
<el-image :src="qrImg" fit="cover" />
|
||
</div>
|
||
<div class="code-down">
|
||
<el-icon><Download /></el-icon>
|
||
<a>下载溯源码</a>
|
||
</div>
|
||
<div class="code-copy">
|
||
<div class="code-txt">
|
||
<span class="txt-ellipsis clamp1" style="width: 100%">10.5488754215478XE254.10405488754215478XE254201</span>
|
||
</div>
|
||
<div class="do-copy">
|
||
<el-button type="primary" @click="toCopy">复制</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="code-to-detail">
|
||
<el-button type="primary" @click="toCodeDetail">点击查看溯源详情</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="tabVal == 'evaluate'" class="content-evaluate">
|
||
<evaluate :good-id="goodId" :good-url="currentGood.goodUrls[0]"></evaluate>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</common>
|
||
</div>
|
||
</template>
|
||
<script setup name="ecommerce">
|
||
import common from './components/common.vue';
|
||
import banner from './components/banner.vue';
|
||
import { onMounted, reactive, ref, computed } from 'vue';
|
||
import { getAssetsFile } from '@/utils';
|
||
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
||
import evaluate from './components/evaluate.vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { getGoodDetail } from '@/apis/agricultural.js';
|
||
import { addToCart, quicklyBuy } from '../../apis/agricultural.js';
|
||
import { useMethodsStore } from '@/store/modules/methods';
|
||
import { ElMessage } from 'element-plus';
|
||
|
||
const methodsStore = useMethodsStore();
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const goodId = route.query.id; // 获取参数
|
||
const pId = route.query.pid;
|
||
const currentWeight = ref(0);
|
||
|
||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
|
||
const tabList = reactive([
|
||
{ label: '详情介绍', value: 'detail' },
|
||
{ label: '溯源码', value: 'sourceCode' },
|
||
{ label: '评价', value: 'evaluate' },
|
||
]);
|
||
|
||
const currentIndex = ref(0);
|
||
const showDetail = ref(true);
|
||
|
||
const currentGood = ref({
|
||
showPic: false,
|
||
goodUrls: [],
|
||
attribute: [],
|
||
});
|
||
|
||
const currentPrice = computed(() => {
|
||
return currentGood.value?.netWeight?.[currentWeight.value]?.goodPrice ?? 0;
|
||
});
|
||
|
||
const currentStock = computed(() => {
|
||
return currentGood.value?.netWeight?.[currentWeight.value]?.goodStock ?? 0;
|
||
});
|
||
|
||
const mockData = [
|
||
{
|
||
goodName: '甜糯玉米种子',
|
||
sold: 1200,
|
||
price: 25,
|
||
sendAddress: '河南信阳',
|
||
safeguard: '七天保价',
|
||
weight: ['100g', '200g'],
|
||
goodUrl: ['images/mockPic/cornTop.png'],
|
||
detailUrl: ['cornBottom1.png', 'cornBottom2.png', 'cornBottom3.png', 'cornBottom4.png'],
|
||
},
|
||
{
|
||
goodName: '张塘王豇豆种子种籽',
|
||
sold: 1200,
|
||
price: 4.35,
|
||
sendAddress: '山东潍坊',
|
||
safeguard: '七天保价',
|
||
weight: ['100粒', '200粒'],
|
||
goodUrl: ['images/mockPic/beanTop.png'],
|
||
detailUrl: ['beanBottom1.png', 'beanBottom2.png', 'beanBottom3.png', 'beanBottom4.png'],
|
||
},
|
||
{
|
||
goodName: '茄子种子种籽',
|
||
sold: 1200,
|
||
price: 3.92,
|
||
sendAddress: '山东潍坊',
|
||
safeguard: '七天保价',
|
||
weight: ['100粒', '200粒'],
|
||
goodUrl: ['images/mockPic/eggplantTop.png'],
|
||
detailUrl: ['eggplantBottom1.png', 'eggplantBottom2.png', 'eggplantBottom3.png', 'eggplantBottom4.png'],
|
||
},
|
||
{
|
||
goodName: '正宗绿贝贝南瓜种籽',
|
||
sold: 1200,
|
||
price: 6.8,
|
||
sendAddress: '安徽马鞍山',
|
||
safeguard: '七天保价',
|
||
weight: ['10粒', '20粒'],
|
||
goodUrl: ['images/mockPic/pumpkinTop.png'],
|
||
detailUrl: ['pumpkinBottom1.png', 'pumpkinBottom2.png', 'pumpkinBottom3.png', 'pumpkinBottom4.png'],
|
||
},
|
||
{
|
||
goodName: '复合肥料18-5-7',
|
||
sold: 1200,
|
||
price: 154,
|
||
sendAddress: '浙江金华',
|
||
safeguard: '七天保价',
|
||
weight: ['25kg', '50kg'],
|
||
goodUrl: ['images/mockPic/fertilizerTop.png'],
|
||
detailUrl: ['fertilizerBottom1.png', 'fertilizerBottom2.png'],
|
||
},
|
||
{
|
||
goodName: '正宗硫酸钾 农用钾肥',
|
||
sold: 1200,
|
||
price: 13.5,
|
||
sendAddress: '内蒙古',
|
||
safeguard: '七天保价',
|
||
weight: ['5斤', '10斤'],
|
||
goodUrl: ['images/mockPic/KSO4Top.png'],
|
||
detailUrl: ['KSO4Bottom1.png', 'KSO4Bottom2.png', 'KSO4Bottom3.png', 'KSO4Bottom4.png'],
|
||
},
|
||
{
|
||
goodName: '噻虫嗪农药',
|
||
sold: 1200,
|
||
price: 8.6,
|
||
sendAddress: '内蒙古',
|
||
safeguard: '七天保价',
|
||
weight: ['500g'],
|
||
goodUrl: ['images/mockPic/pesticideTop.png'],
|
||
detailUrl: ['pesticideBottom1.png', 'pesticideBottom2.png', 'pesticideBottom3.png', 'pesticideBottom4.png', 'pesticideBottom5.png'],
|
||
},
|
||
{
|
||
goodName: '11.6%甲维氯笨氣虫苯甲铣胺酰胺笨甲先胺水稻钻心虫农药杀虫剂',
|
||
sold: 1200,
|
||
price: 35.6,
|
||
sendAddress: '山东烟台',
|
||
safeguard: '七天保价',
|
||
weight: ['500g', '1000g'],
|
||
goodUrl: ['images/mockPic/nyTop.png'],
|
||
detailUrl: ['nyBottom1.png', 'nyBottom2.png', 'nyBottom3.png', 'nyBottom4.png'],
|
||
},
|
||
{
|
||
goodName: '铁皮石斛种子',
|
||
sold: 13,
|
||
price: '80/g',
|
||
sendAddress: '耿马县',
|
||
safeguard: '七天保价',
|
||
weight: ['1g', '2g', '5g', '10g'],
|
||
goodUrl: ['images/mockPic/shihuTop.png'],
|
||
detailUrl: ['shihuBottom0.png', 'shihuBottom1.png', 'shihuBottom2.png', 'shihuBottom3.png'],
|
||
},
|
||
{
|
||
goodName: '黑皮甘蔗苗',
|
||
sold: 1400,
|
||
price: '0.7/株',
|
||
sendAddress: '耿马县',
|
||
safeguard: '七天保价',
|
||
weight: ['10株', '50株', '200株', '500株'],
|
||
goodUrl: ['images/mockPic/ganzheTop.png'],
|
||
detailUrl: ['ganzheBottom0.png', 'ganzheBottom1.png', 'ganzheBottom2.png', 'ganzheBottom3.png'],
|
||
},
|
||
{
|
||
goodName: '美人椒种子 -辣椒种子',
|
||
sold: 548,
|
||
price: '43/斤',
|
||
sendAddress: '耿马县',
|
||
safeguard: '七天保价',
|
||
weight: ['1斤', '2斤'],
|
||
goodUrl: ['images/mockPic/chiliTop.png'],
|
||
detailUrl: ['chiliBottom0.png', 'chiliBottom1.png', 'chiliBottom2.png', 'chiliBottom3.png'],
|
||
},
|
||
{
|
||
goodName: '四季青种子',
|
||
sold: 548,
|
||
price: '19.5/包',
|
||
sendAddress: '耿马县',
|
||
safeguard: '七天保价',
|
||
weight: ['1包（500-2000粒）', '2包', '4包'],
|
||
goodUrl: ['images/mockPic/leafyTop.png'],
|
||
detailUrl: ['leafyBottom0.png', 'leafyBottom1.png', 'leafyBottom2.png'],
|
||
},
|
||
{
|
||
goodName: '青花菜种子',
|
||
sold: 548,
|
||
price: '10/包',
|
||
sendAddress: '耿马县',
|
||
safeguard: '七天保价',
|
||
weight: ['1包（300-800粒）', '2包', '4包'],
|
||
goodUrl: ['images/mockPic/broccoliTop.png'],
|
||
detailUrl: ['broccoliBottom2.png', 'broccoliBottom1.png', 'broccoliBottom0.png'],
|
||
},
|
||
{
|
||
goodName: '黑叶小白菜种子',
|
||
sold: 82,
|
||
price: '60/公斤',
|
||
sendAddress: '耿马县',
|
||
safeguard: '七天保价',
|
||
weight: ['1公斤', '2公斤', '5公斤'],
|
||
goodUrl: ['images/mockPic/choyTop.png'],
|
||
detailUrl: ['choyBottom0.png', 'choyBottom1.png', 'choyBottom2.png', 'choyBottom3.png'],
|
||
},
|
||
];
|
||
|
||
let tabVal = ref('detail');
|
||
|
||
let saveInfo = reactive({
|
||
num: 0,
|
||
});
|
||
|
||
onMounted(() => {
|
||
showDetail.value = false;
|
||
// const num = Number(pId);
|
||
getGoodDetail(goodId)
|
||
.then(async (res) => {
|
||
if (res.code === 200) {
|
||
currentGood.value = res.data;
|
||
// 数据转义
|
||
await formattedData(res.data);
|
||
showDetail.value = true;
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
});
|
||
// if (num === 55) {
|
||
// // 1. 获取前四个元素的索引（0, 1, 2, 3）
|
||
// const allIndices = [0, 1, 2, 3];
|
||
// // 2. 随机打乱索引顺序
|
||
// const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
|
||
// // 3. 选择第一个
|
||
// currentIndex.value = shuffledIndices.slice(0, 1)[0];
|
||
// } else if (num === 61) {
|
||
// // 1. 获取前四个元素的索引（0, 1, 2, 3）
|
||
// const allIndices = [4, 5];
|
||
// // 2. 随机打乱索引顺序
|
||
// const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
|
||
// // 3. 选择第一个
|
||
// currentIndex.value = shuffledIndices.slice(0, 1)[0];
|
||
// } else if (num === 65) {
|
||
// // 1. 获取前四个元素的索引（0, 1, 2, 3）
|
||
// const allIndices = [6, 7];
|
||
// // 2. 随机打乱索引顺序
|
||
// const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
|
||
// // 3. 选择第一个
|
||
// currentIndex.value = shuffledIndices.slice(0, 1)[0];
|
||
// }
|
||
// if (Number(goodId) === 2140012566 || Number(goodId) === 2140012569) {
|
||
// getGoodDetail(Number(goodId)).then(async (res) => {
|
||
// currentGood = res.data;
|
||
// // 数据转义
|
||
// await formattedData(res.data);
|
||
// showDetail.value = true;
|
||
// });
|
||
// currentIndex.value = 8;
|
||
// } else if (Number(goodId) === 2140012546 || Number(goodId) === 2140012547) {
|
||
// currentIndex.value = 9;
|
||
// } else if (Number(goodId) === 2140012562) {
|
||
// currentIndex.value = 2;
|
||
// } else if (Number(goodId) === 2140012563) {
|
||
// currentIndex.value = 10;
|
||
// } else if (Number(goodId) === 2140012586) {
|
||
// currentIndex.value = 11;
|
||
// } else if (Number(goodId) === 2140012587) {
|
||
// currentIndex.value = 12;
|
||
// } else if (Number(goodId) === 2140012588) {
|
||
// currentIndex.value = 13;
|
||
// }
|
||
});
|
||
|
||
// 转义数据格式
|
||
const formattedData = (data) => {
|
||
if (currentGood.value.attribute) {
|
||
currentGood.value.attribute = Object.entries(data.attribute).map(([key, value]) => ({ key, value }));
|
||
}
|
||
if (currentGood.value.detailUrl) {
|
||
currentGood.value.detailUrl = currentGood.value.detailUrl.split(',');
|
||
}
|
||
currentGood.value.goodUrls = data.goodUrl.split(',');
|
||
};
|
||
|
||
const toCodeDetail = () => {
|
||
router.push('/sub-operation-service/ecommerce-agricultural/ecommerce-agriculturalDetail/source?id=' + goodId);
|
||
};
|
||
|
||
const toBack = (level) => {
|
||
router.go(level);
|
||
};
|
||
|
||
const buyGood = () => {
|
||
const obj = {
|
||
goodsId: goodId,
|
||
weightId: currentGood.value.netWeight[currentWeight.value].id, // 规格ID
|
||
quantity: saveInfo.num,
|
||
};
|
||
// quicklyBuy(obj).then((res) => {});
|
||
};
|
||
|
||
const addGoodToCart = () => {
|
||
const obj = {
|
||
goodsId: goodId, // 商品ID
|
||
weightId: currentGood.value.netWeight[currentWeight.value].id, // 规格ID
|
||
quantity: saveInfo.num, // 数量，不填写默认是1
|
||
};
|
||
addToCart(obj).then((res) => {
|
||
if (res.code === 200) {
|
||
methodsStore.callOuterMethod();
|
||
ElMessage.success('添加成功');
|
||
}
|
||
});
|
||
};
|
||
|
||
const toCopy = () => {};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.agricultural-detail-warp {
|
||
width: 100%;
|
||
.agricultural-detail-info {
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
padding: 10px 24px;
|
||
width: 100%;
|
||
border-radius: 16px;
|
||
background: $color-fff;
|
||
.top-title {
|
||
width: 100%;
|
||
text-align: left;
|
||
.father-title,
|
||
.current-title {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
.father-title {
|
||
font-size: 18px;
|
||
}
|
||
.current-title {
|
||
position: relative;
|
||
margin-left: 8px;
|
||
padding: 0 8px;
|
||
font-size: 16px;
|
||
color: $color-main;
|
||
}
|
||
.current-title::before {
|
||
position: absolute;
|
||
top: 30%;
|
||
left: 0;
|
||
content: '.';
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
.top-info {
|
||
margin: 16px 0;
|
||
text-align: left;
|
||
::v-deep() {
|
||
.ecommerce-banner {
|
||
position: relative;
|
||
padding: 0 48px !important;
|
||
}
|
||
.el-carousel {
|
||
position: unset !important;
|
||
}
|
||
.el-carousel__arrow--left {
|
||
left: 0 !important;
|
||
}
|
||
.el-carousel__arrow--right {
|
||
right: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
.price-sold {
|
||
margin: 16px 0;
|
||
.price {
|
||
position: relative;
|
||
padding: 0 16px;
|
||
font-size: 32px;
|
||
color: $color-main;
|
||
}
|
||
.price::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
font-size: 16px;
|
||
content: '￥';
|
||
transform: translateY(-50%);
|
||
}
|
||
.sold {
|
||
font-size: 16px;
|
||
color: $color-999;
|
||
}
|
||
.sold::before {
|
||
content: '已售';
|
||
}
|
||
}
|
||
.tag-list {
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
color: $color-999;
|
||
gap: 10px;
|
||
.tag-item {
|
||
position: relative;
|
||
padding-left: 32px;
|
||
.iconfont {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%);
|
||
&.icon-see {
|
||
font-size: 24px;
|
||
}
|
||
&.icon-ci {
|
||
font-size: 20px;
|
||
}
|
||
&.icon-time {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
.tips-list {
|
||
margin: 16px 0;
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.spu-sku-list {
|
||
width: 100%;
|
||
.spu-title {
|
||
font-size: 16px;
|
||
}
|
||
.spu-sku-warp {
|
||
display: inline-flex;
|
||
justify-content: space-around;
|
||
margin-top: 16px;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
.spu-sku-item {
|
||
width: calc((100% - 16px) / 2);
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
cursor: pointer;
|
||
&.normal {
|
||
border: 1px solid $color-da;
|
||
color: $color-999;
|
||
}
|
||
&.act {
|
||
border: 1px solid $color-main;
|
||
color: $color-main;
|
||
}
|
||
}
|
||
}
|
||
.spu-sku-warp::after {
|
||
content: '';
|
||
flex: auto;
|
||
}
|
||
}
|
||
.goods-num {
|
||
margin: 16px 0;
|
||
.num-warp,
|
||
.num-title {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.num-title {
|
||
font-size: 16px;
|
||
}
|
||
.num-warp {
|
||
.is-have {
|
||
display: inline-block;
|
||
padding-left: 8px;
|
||
font-size: 12px;
|
||
color: $color-999;
|
||
}
|
||
}
|
||
}
|
||
.top-btn {
|
||
.item-btn {
|
||
display: inline-block;
|
||
margin: 8px 24px 8px 0;
|
||
margin-top: 16px;
|
||
padding: 0 24px;
|
||
font-size: 20px;
|
||
border-radius: 12px;
|
||
color: $color-fff;
|
||
line-height: 42px;
|
||
&.sign {
|
||
background: $color-main;
|
||
cursor: pointer;
|
||
}
|
||
&.sign:hover {
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */
|
||
}
|
||
&.reservation {
|
||
background: $color-warning;
|
||
cursor: pointer;
|
||
}
|
||
&.reservation:hover {
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */
|
||
}
|
||
}
|
||
}
|
||
.agricultural-detail-content {
|
||
width: 100%;
|
||
text-align: left;
|
||
.detail-content {
|
||
.tab-top {
|
||
margin: 42px 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
::v-deep() {
|
||
.el-radio-button:first-child .el-radio-button__inner {
|
||
border-radius: 16px 0 0 16px;
|
||
}
|
||
.el-radio-button:last-child .el-radio-button__inner {
|
||
border-radius: 0 16px 16px 0;
|
||
}
|
||
.el-radio-button__inner {
|
||
padding-right: 48px !important;
|
||
padding-left: 48px !important;
|
||
font-size: 20px;
|
||
line-height: 32px !important;
|
||
}
|
||
}
|
||
}
|
||
.tab-content {
|
||
margin: 24px 0;
|
||
width: 100%;
|
||
.content-detail,
|
||
.content-source-code,
|
||
.content-evaluate {
|
||
width: 100%;
|
||
}
|
||
.content-detail {
|
||
.detail-des {
|
||
margin-bottom: 24px;
|
||
width: 90%;
|
||
}
|
||
}
|
||
.content-source-code {
|
||
.code-warp {
|
||
width: 100%;
|
||
text-align: center;
|
||
.code-img {
|
||
margin: auto;
|
||
width: 230px;
|
||
height: 230px;
|
||
}
|
||
.code-down {
|
||
margin: 16px 0;
|
||
color: $color-main;
|
||
.el-icon,
|
||
a {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.el-icon {
|
||
font-size: 22px;
|
||
}
|
||
a {
|
||
font-size: 16px;
|
||
color: $color-main;
|
||
}
|
||
}
|
||
.code-copy {
|
||
.code-txt {
|
||
display: inline-block;
|
||
padding: 12px 8px;
|
||
width: 200px;
|
||
border-radius: 16px 0 0 16px;
|
||
background: $color-main-table-header;
|
||
vertical-align: middle;
|
||
}
|
||
.do-copy {
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
margin-left: -6px;
|
||
.el-button {
|
||
padding: 21px 16px;
|
||
font-size: 16px;
|
||
border-radius: 12px;
|
||
}
|
||
}
|
||
}
|
||
.code-to-detail {
|
||
margin: 24px 0;
|
||
.el-button {
|
||
padding: 16px 116px;
|
||
height: 48px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
border-radius: 24px;
|
||
line-height: 48px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|