720 lines
23 KiB
Vue
720 lines
23 KiB
Vue
<template>
|
||
<div class="agricultural-detail-warp">
|
||
<common current-name="agricultural">
|
||
<template #main>
|
||
<div class="agricultural-detail-info">
|
||
<div class="top-title">
|
||
<div class="father-title" @click="toBack(-1)">
|
||
<el-icon><ArrowLeftBold /></el-icon>农资交易
|
||
</div>
|
||
<div class="current-title">查看详情</div>
|
||
</div>
|
||
|
||
<div class="top-info">
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<banner
|
||
:key="currentIndex"
|
||
name="landdetail"
|
||
:imglist="mockData[currentIndex].images"
|
||
indicator-pos="none"
|
||
arrow="always"
|
||
height="340px"
|
||
:is-view="true"
|
||
>
|
||
</banner>
|
||
</el-col>
|
||
<el-col :span="12" class="top-info-txt">
|
||
<h1 class="title">{{ mockData[currentIndex].titleName }}</h1>
|
||
<div class="price-sold">
|
||
<span class="price">{{ mockData[currentIndex].price }}</span>
|
||
<span class="sold">{{ mockData[currentIndex].sold }}</span>
|
||
</div>
|
||
<div class="tips-list">
|
||
<el-row :gutter="16">
|
||
<el-col :span="24">发货地址：{{ mockData[currentIndex].soldAddress }}</el-col>
|
||
<el-col :span="24">保 障：{{ mockData[currentIndex].right }}</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 mockData[currentIndex].weight"
|
||
:key="currentIndex + '-' + index"
|
||
class="spu-sku-item"
|
||
:class="[index === 0 ? 'act' : 'normal']"
|
||
>
|
||
{{ item }}
|
||
</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 class="is-have">有货</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-btn">
|
||
<div class="item-btn sign">
|
||
<span>立即购买</span>
|
||
</div>
|
||
<div class="item-btn reservation">
|
||
<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">
|
||
<el-descriptions class="detail-des" title=" " :column="2" size="Large" border>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">品牌</div>
|
||
</template>
|
||
<span>童涵春堂</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">系列</div>
|
||
</template>
|
||
<span>农用百货</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">型号</div>
|
||
</template>
|
||
<span>种子种苗</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">产地</div>
|
||
</template>
|
||
<span>耿马县</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">省份</div>
|
||
</template>
|
||
<span>云南省</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">城市</div>
|
||
</template>
|
||
<span>临沧市</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">储存条件</div>
|
||
</template>
|
||
<span>15~25℃（避免高温或冷冻）</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">包装方式</div>
|
||
</template>
|
||
<span>盒装</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">净含量</div>
|
||
</template>
|
||
<span>50g、100g、250g、500g</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">使用方式</div>
|
||
</template>
|
||
<span>种植</span>
|
||
</el-descriptions-item>
|
||
<!-- <el-descriptions-item>-->
|
||
<!-- <template #label>-->
|
||
<!-- <div class="cell-item">厂名</div>-->
|
||
<!-- </template>-->
|
||
<!-- <span>遇合堂禽畜药品有限公司</span>-->
|
||
<!-- </el-descriptions-item>-->
|
||
<!-- <el-descriptions-item>-->
|
||
<!-- <template #label>-->
|
||
<!-- <div class="cell-item">厂址</div>-->
|
||
<!-- </template>-->
|
||
<!-- <span>云南省昆明市呈贡区彩云南路100号</span>-->
|
||
<!-- </el-descriptions-item>-->
|
||
<!-- <el-descriptions-item>-->
|
||
<!-- <template #label>-->
|
||
<!-- <div class="cell-item">保质期</div>-->
|
||
<!-- </template>-->
|
||
<!-- <span>7天</span>-->
|
||
<!-- </el-descriptions-item>-->
|
||
</el-descriptions>
|
||
</div>
|
||
<div style="display: flex; justify-content: center; flex-wrap: wrap">
|
||
<el-image
|
||
v-for="(item, index) in mockData[currentIndex].bigImages"
|
||
:key="currentIndex + '-' + index"
|
||
:src="getAssetsFile('images/mockPic/' + item)?.href ?? ''"
|
||
style="width: 80%"
|
||
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"></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 } 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';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const goodId = route.query.id; // 获取参数
|
||
const pId = route.query.pid;
|
||
|
||
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 mockData = [
|
||
{
|
||
titleName: '甜糯玉米种子',
|
||
sold: 1200,
|
||
price: 25,
|
||
soldAddress: '河南信阳',
|
||
right: '七天保价',
|
||
weight: ['100g', '200g'],
|
||
images: ['images/mockPic/cornTop.png'],
|
||
bigImages: ['cornBottom1.png', 'cornBottom2.png', 'cornBottom3.png', 'cornBottom4.png'],
|
||
},
|
||
{
|
||
titleName: '张塘王豇豆种子种籽',
|
||
sold: 1200,
|
||
price: 4.35,
|
||
soldAddress: '山东潍坊',
|
||
right: '七天保价',
|
||
weight: ['100粒', '200粒'],
|
||
images: ['images/mockPic/beanTop.png'],
|
||
bigImages: ['beanBottom1.png', 'beanBottom2.png', 'beanBottom3.png', 'beanBottom4.png'],
|
||
},
|
||
{
|
||
titleName: '茄子种子种籽',
|
||
sold: 1200,
|
||
price: 3.92,
|
||
soldAddress: '山东潍坊',
|
||
right: '七天保价',
|
||
weight: ['100粒', '200粒'],
|
||
images: ['images/mockPic/eggplantTop.png'],
|
||
bigImages: ['eggplantBottom1.png', 'eggplantBottom2.png', 'eggplantBottom3.png', 'eggplantBottom4.png'],
|
||
},
|
||
{
|
||
titleName: '正宗绿贝贝南瓜种籽',
|
||
sold: 1200,
|
||
price: 6.8,
|
||
soldAddress: '安徽马鞍山',
|
||
right: '七天保价',
|
||
weight: ['10粒', '20粒'],
|
||
images: ['images/mockPic/pumpkinTop.png'],
|
||
bigImages: ['pumpkinBottom1.png', 'pumpkinBottom2.png', 'pumpkinBottom3.png', 'pumpkinBottom4.png'],
|
||
},
|
||
{
|
||
titleName: '复合肥料18-5-7',
|
||
sold: 1200,
|
||
price: 154,
|
||
soldAddress: '浙江金华',
|
||
right: '七天保价',
|
||
weight: ['25kg', '50kg'],
|
||
images: ['images/mockPic/fertilizerTop.png'],
|
||
bigImages: ['fertilizerBottom1.png', 'fertilizerBottom2.png'],
|
||
},
|
||
{
|
||
titleName: '正宗硫酸钾 农用钾肥',
|
||
sold: 1200,
|
||
price: 13.5,
|
||
soldAddress: '内蒙古',
|
||
right: '七天保价',
|
||
weight: ['5斤', '10斤'],
|
||
images: ['images/mockPic/KSO4Top.png'],
|
||
bigImages: ['KSO4Bottom1.png', 'KSO4Bottom2.png', 'KSO4Bottom3.png', 'KSO4Bottom4.png'],
|
||
},
|
||
{
|
||
titleName: '噻虫嗪农药',
|
||
sold: 1200,
|
||
price: 8.6,
|
||
soldAddress: '内蒙古',
|
||
right: '七天保价',
|
||
weight: ['500g'],
|
||
images: ['images/mockPic/pesticideTop.png'],
|
||
bigImages: ['pesticideBottom1.png', 'pesticideBottom2.png', 'pesticideBottom3.png', 'pesticideBottom4.png', 'pesticideBottom5.png'],
|
||
},
|
||
{
|
||
titleName: '11.6%甲维氯笨氣虫苯甲铣胺酰胺笨甲先胺水稻钻心虫农药杀虫剂',
|
||
sold: 1200,
|
||
price: 35.6,
|
||
soldAddress: '山东烟台',
|
||
right: '七天保价',
|
||
weight: ['500g', '1000g'],
|
||
images: ['images/mockPic/nyTop.png'],
|
||
bigImages: ['nyBottom1.png', 'nyBottom2.png', 'nyBottom3.png', 'nyBottom4.png'],
|
||
},
|
||
{
|
||
titleName: '铁皮石斛种子',
|
||
sold: 13,
|
||
price: '80/g',
|
||
soldAddress: '耿马县',
|
||
right: '七天保价',
|
||
weight: ['1g', '2g', '5g', '10g'],
|
||
images: ['images/mockPic/shihuTop.png'],
|
||
bigImages: ['shihuBottom0.png', 'shihuBottom1.png', 'shihuBottom2.png', 'shihuBottom3.png'],
|
||
},
|
||
{
|
||
titleName: '黑皮甘蔗苗',
|
||
sold: 1400,
|
||
price: '0.7/株',
|
||
soldAddress: '耿马县',
|
||
right: '七天保价',
|
||
weight: ['10株', '50株', '200株', '500株'],
|
||
images: ['images/mockPic/ganzheTop.png'],
|
||
bigImages: ['ganzheBottom0.png', 'ganzheBottom1.png', 'ganzheBottom2.png', 'ganzheBottom3.png'],
|
||
},
|
||
{
|
||
titleName: '美人椒种子 -辣椒种子',
|
||
sold: 548,
|
||
price: '43/斤',
|
||
soldAddress: '耿马县',
|
||
right: '七天保价',
|
||
weight: ['1斤', '2斤'],
|
||
images: ['images/mockPic/chiliTop.png'],
|
||
bigImages: ['chiliBottom0.png', 'chiliBottom1.png', 'chiliBottom2.png', 'chiliBottom3.png'],
|
||
},
|
||
{
|
||
titleName: '四季青种子',
|
||
sold: 548,
|
||
price: '19.5/包',
|
||
soldAddress: '耿马县',
|
||
right: '七天保价',
|
||
weight: ['1包（500-2000粒）', '2包', '4包'],
|
||
images: ['images/mockPic/leafyTop.png'],
|
||
bigImages: ['leafyBottom0.png', 'leafyBottom1.png', 'leafyBottom2.png'],
|
||
},
|
||
{
|
||
titleName: '青花菜种子',
|
||
sold: 548,
|
||
price: '10/包',
|
||
soldAddress: '耿马县',
|
||
right: '七天保价',
|
||
weight: ['1包（300-800粒）', '2包', '4包'],
|
||
images: ['images/mockPic/broccoliTop.png'],
|
||
bigImages: ['broccoliBottom2.png', 'broccoliBottom1.png', 'broccoliBottom0.png'],
|
||
},
|
||
{
|
||
titleName: '黑叶小白菜种子',
|
||
sold: 82,
|
||
price: '60/公斤',
|
||
soldAddress: '耿马县',
|
||
right: '七天保价',
|
||
weight: ['1公斤', '2公斤', '5公斤'],
|
||
images: ['images/mockPic/choyTop.png'],
|
||
bigImages: ['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);
|
||
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) {
|
||
currentIndex.value = 8;
|
||
showDetail.value = true;
|
||
} 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 toCodeDetail = () => {
|
||
let id = '01';
|
||
router.push('/sub-operation-service/ecommerce-sourceCodeDetail?id=' + id);
|
||
};
|
||
|
||
const toBack = (level) => {
|
||
router.go(level);
|
||
};
|
||
|
||
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;
|
||
}
|
||
&.reservation {
|
||
background: $color-warning;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.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>
|