2023-12-04 09:15:31 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="equipDetail">
|
|
|
|
|
|
<div class="top">
|
|
|
|
|
|
<div class="showImg">
|
|
|
|
|
|
<showImg></showImg>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="baseInfo">
|
|
|
|
|
|
<div class="equipInfo">
|
|
|
|
|
|
<div class="left">
|
|
|
|
|
|
<div class="title">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="name">220El履带挖掘机</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
<div class="tag">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="item">待租</div>
|
|
|
|
|
|
<div class="item otherItem">已审核</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="viewNnum">浏览1000+</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
<div class="infoBox">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="item" v-for="(v, i) in equipBaseInfoList" :key="i">
|
|
|
|
|
|
<div class="label">{{ v.label }}：</div>
|
|
|
|
|
|
<div class="value">操作重量：22吨 铲斗容量：1立方亩</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="right">
|
|
|
|
|
|
<div class="price">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
￥
|
|
|
|
|
|
<span>18500</span>
|
|
|
|
|
|
/月
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="options">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="item contact">联系商家</div>
|
|
|
|
|
|
<div class="item applyFor">我要租</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="businessInfo">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<img class="bgCar" src="@/assets/img/equipDetail/gouwu.png" />
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
|
|
|
|
|
<div class="business">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<img
|
|
|
|
|
|
src="https://img0.baidu.com/it/u=3896113677,3541736724&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=0b8dabbcda79511d6d18aaed664132fd"
|
|
|
|
|
|
class="avatar" />
|
2023-12-04 09:15:31 +08:00
|
|
|
|
<div class="fonts">
|
|
|
|
|
|
<div class="name">珠海嘉昌设备有限责任公司</div>
|
|
|
|
|
|
<div class="other">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="item" v-for="(v, i) in businessList" :key="i">
|
|
|
|
|
|
<div class="label">{{ v.label }}：</div>
|
|
|
|
|
|
<div class="value">111111111{{ v.key }}{{ v.unit }}</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="detail">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="publicTitle">装备详情</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
<div class="publicLine"></div>
|
|
|
|
|
|
<div class="list publicContent">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="item" v-for="(v, i) in equipDetailKeyList" :key="i">
|
|
|
|
|
|
<div class="label">{{ v.label }}：</div>
|
|
|
|
|
|
<div :class="v.fn ? 'fnValue' : 'value'">111111111111</div>
|
|
|
|
|
|
</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="appearance">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="publicTitle">装备外观</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
<div class="publicLine"></div>
|
|
|
|
|
|
<div class="urlList publicContent">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<img :src="v" v-for="(v, i) in testUrl" :key="i" />
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="recommend">
|
|
|
|
|
|
<div class="publicTitle">
|
|
|
|
|
|
<div>为您推荐</div>
|
|
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<div class="change">换一批</div>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
<equip-card class="item" v-for="(v, i) in 3" :key="i" :id="i"></equip-card>
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
2023-12-04 17:42:11 +08:00
|
|
|
|
import ShowImg from './comoonents/showImg.vue'
|
|
|
|
|
|
import { reactive, ref } from 'vue'
|
|
|
|
|
|
import EquipCard from 'components/equipCard.vue'
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
//设备简略基本信息
|
|
|
|
|
|
const equipBaseInfoList = reactive([
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '设备规格',
|
|
|
|
|
|
key: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '设备单位',
|
|
|
|
|
|
key: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '配备机手',
|
|
|
|
|
|
key: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '发布时间',
|
|
|
|
|
|
key: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '更新时间',
|
|
|
|
|
|
key: ''
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
//商家标签信息
|
|
|
|
|
|
const businessList = reactive([
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '入驻时间',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
unit: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '上架数量',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
unit: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '访问量',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
unit: '次'
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
const equipDetailKeyList = reactive([
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '装备编号',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '装备类别',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '装备组别',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '装备名称',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '规格/操作重量',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '品牌',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '装备型号',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '序列号码',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '出场时间',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '工作时长',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '检验信息',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '1',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '保险信息',
|
|
|
|
|
|
key: '',
|
|
|
|
|
|
fn: '2',
|
|
|
|
|
|
arg: ''
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
const testUrl = [
|
|
|
|
|
|
'https://img0.baidu.com/it/u=3182669744,3015526205&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
|
|
|
|
|
|
'https://img2.baidu.com/it/u=2078785911,1809964779&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500',
|
|
|
|
|
|
'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
|
|
|
|
|
|
]
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
const fn = () => {
|
|
|
|
|
|
console.log('fn 111111111111111111111')
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
const that = {
|
|
|
|
|
|
fn
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.equipDetail {
|
|
|
|
|
|
.top {
|
2023-12-04 09:15:31 +08:00
|
|
|
|
display: flex;
|
2023-12-04 17:42:11 +08:00
|
|
|
|
margin-bottom: 50px;
|
|
|
|
|
|
.showImg {
|
|
|
|
|
|
width: 38%;
|
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin-right: 30px;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
}
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.baseInfo {
|
|
|
|
|
|
flex: 1;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
display: flex;
|
2023-12-04 17:42:11 +08:00
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.equipInfo {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
.left {
|
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
.title {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.name {
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
}
|
|
|
|
|
|
.tag {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.item {
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #005af2;
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
padding: 2px 10px;
|
|
|
|
|
|
border: 1px solid #005af2;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.otherItem {
|
|
|
|
|
|
border-color: #ff6734;
|
|
|
|
|
|
color: #ff6734;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.viewNnum {
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: #bcbcbc;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.infoBox {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
.item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 18px;
|
|
|
|
|
|
.label {
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #8e8e8e;
|
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.price {
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
color: #ff4800;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
span {
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.options {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: flex-end;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.item {
|
|
|
|
|
|
width: 110px;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.contact {
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
background: #3cabff;
|
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.applyFor {
|
|
|
|
|
|
border: 1px solid #3cabff;
|
|
|
|
|
|
color: #3cabff;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
}
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.businessInfo {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 147px;
|
|
|
|
|
|
background: #f7f9fa;
|
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 25px 15px;
|
|
|
|
|
|
.bgCar {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
z-index: 0;
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.business {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.avatar {
|
|
|
|
|
|
width: 65px;
|
|
|
|
|
|
height: 65px;
|
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.fonts {
|
|
|
|
|
|
.name {
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.other {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
.item {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
|
.label {
|
|
|
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-12-04 17:42:11 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.publicTitle {
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
|
|
.publicLine {
|
2023-12-04 09:15:31 +08:00
|
|
|
|
width: 100%;
|
2023-12-04 17:42:11 +08:00
|
|
|
|
height: 12px;
|
|
|
|
|
|
border-bottom: 1px solid #e0e0e0;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
position: relative;
|
2023-12-04 17:42:11 +08:00
|
|
|
|
&:before {
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
height: 3px;
|
|
|
|
|
|
width: 40px;
|
|
|
|
|
|
background: #2282ff;
|
|
|
|
|
|
border-radius: 2px;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
position: absolute;
|
2023-12-04 17:42:11 +08:00
|
|
|
|
bottom: -1px;
|
|
|
|
|
|
left: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.publicContent {
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
padding: 40px 70px 10px;
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.detail {
|
|
|
|
|
|
.list {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.item {
|
|
|
|
|
|
width: calc(100% / 3);
|
|
|
|
|
|
font-size: 16px;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
2023-12-04 17:42:11 +08:00
|
|
|
|
font-weight: 600;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
display: flex;
|
2023-12-04 17:42:11 +08:00
|
|
|
|
margin-bottom: 35px;
|
|
|
|
|
|
.label {
|
|
|
|
|
|
color: #8e8e8e;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
}
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.value {
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
.fnValue {
|
|
|
|
|
|
color: #0087cd;
|
2023-12-04 09:15:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.appearance {
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
.urlList {
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.recommend {
|
|
|
|
|
|
.change {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: #9d9d9d;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
|
2023-12-04 17:42:11 +08:00
|
|
|
|
.content {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
.item {
|
|
|
|
|
|
width: calc((100% - 40px) / 3);
|
|
|
|
|
|
&:nth-child(3n - 1) {
|
|
|
|
|
|
margin: 0 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-12-04 09:15:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
