土地交易
This commit is contained in:
lzc
parent
8fc195de39
commit
f1d68543bd
@ -34,7 +34,8 @@ body {
|
||||
--el-color-primary: #25bf82;
|
||||
--el-color-primary-light-3: #45dda1;
|
||||
--el-color-primary-light-5: #8cddbd;
|
||||
|
||||
--el-color-primary-light-9: rgba(37, 191, 130, 0.1);
|
||||
--el-color-primary-light-8: rgba(37, 191, 130, 0.5);
|
||||
.el-input {
|
||||
--el-input-focus-border-color: #25bf82;
|
||||
--el-input-focus-border: #25bf82;
|
||||
|
||||
BIN
sub-operation-service/src/assets/images/ecommerce/banner3.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/banner3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 606 KiB |
BIN
sub-operation-service/src/assets/images/ecommerce/test01.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/test01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@ -32,13 +32,13 @@ export const constantRoutes = [
|
||||
name: 'layout',
|
||||
component: Layout,
|
||||
redirect: '/sub-operation-service/home',
|
||||
meta: { title: '首页', icon: 'House' },
|
||||
meta: { title: '首页' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
name: 'home',
|
||||
meta: { title: '首页', icon: 'House' },
|
||||
meta: { title: '首页' },
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -46,32 +46,63 @@ export const constantRoutes = [
|
||||
path: '/ecommerce',
|
||||
name: 'ecommerce',
|
||||
component: Layout,
|
||||
redirect: '/ecommerce',
|
||||
meta: { title: '首页', icon: 'House' },
|
||||
redirect: '/sub-operation-service/ecommerce',
|
||||
meta: { title: '电商交易' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/ecommerce',
|
||||
component: () => import('@/views/ecommerce/index.vue'),
|
||||
name: 'agricultural',
|
||||
meta: { title: '农资交易', icon: 'House' },
|
||||
meta: { title: '农资交易' },
|
||||
},
|
||||
{
|
||||
path: '/purchaser',
|
||||
component: Views,
|
||||
redirect: '/sub-operation-service/purchaser',
|
||||
name: 'purchaserParent',
|
||||
meta: { title: '采购商服务' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/purchaser',
|
||||
component: () => import('@/views/ecommerce/purchaser.vue'),
|
||||
name: 'purchaser',
|
||||
meta: { title: '采购商服务', icon: 'House' },
|
||||
meta: { title: '采购商服务' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/purchaserDetail',
|
||||
component: () => import('@/views/ecommerce/purchaserDetail.vue'),
|
||||
name: 'purchaserDetail',
|
||||
meta: { title: '采购详情' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: '/sub-operation-service/supplier',
|
||||
component: () => import('@/views/ecommerce/supplier.vue'),
|
||||
name: 'supplier',
|
||||
meta: { title: '供应商服务', icon: 'House' },
|
||||
meta: { title: '供应商服务' },
|
||||
},
|
||||
{
|
||||
path: '/land',
|
||||
component: Views,
|
||||
redirect: '/sub-operation-service/land',
|
||||
name: 'landParent',
|
||||
meta: { title: '土地交易' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/land',
|
||||
component: () => import('@/views/ecommerce/land.vue'),
|
||||
name: 'land',
|
||||
meta: { title: '土地交易', icon: 'House' },
|
||||
meta: { title: '土地交易' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/landDetail',
|
||||
component: () => import('@/views/ecommerce/landDetail.vue'),
|
||||
name: 'landDetail',
|
||||
meta: { title: '土地详情' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
$legacy-ie: 10;
|
||||
$color-main:#25BF82;
|
||||
$color-main-table-header:rgba(37,191,130,0.1);
|
||||
$color-main-border:rgba(37, 191, 130, 0.5);
|
||||
$color-5a:#5A5A5A;
|
||||
$color-000:#000;
|
||||
$color-fff:#fff;
|
||||
@ -25,7 +26,7 @@ $color-gray: #d3dce6;
|
||||
$color-gray-light: #e5e9f2;
|
||||
$color-gray-lighter: #eff2f7;
|
||||
$color-333: #333333;
|
||||
$color-666: #333333;
|
||||
$color-666: #666;
|
||||
$color-999: #999999;
|
||||
$color-border-gray: #d1dbe5;
|
||||
$color-input-border: #dcdfe6;
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
max-height: calc(1.5em * 1);
|
||||
}
|
||||
|
||||
.clamp1{
|
||||
.clamp2{
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 2);
|
||||
|
||||
@ -112,12 +112,16 @@ const selectItem = (index, key, item) => {
|
||||
if (key && item.id) {
|
||||
currentLevel.value = index || 0;
|
||||
select[key] = { id: item.id, pId: item.pId ? item.pId : null };
|
||||
emit('select', select);
|
||||
}
|
||||
};
|
||||
|
||||
const selectAll = (key) => {
|
||||
select[key].id = '';
|
||||
emit('select', select);
|
||||
};
|
||||
|
||||
const emit = defineEmits(['select']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.filter-top-warp {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="goods-img">
|
||||
<el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="cover" />
|
||||
</div>
|
||||
<div class="goods-name txt-ellipsis clamp1">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
|
||||
<div class="goods-name txt-ellipsis clamp2">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
|
||||
<div class="goods-do">
|
||||
<div class="price txt-ellipsis clamp">25.00</div>
|
||||
<div class="do">
|
||||
|
||||
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="c-land-item-warp" @click="toDetail">
|
||||
<div class="land-img">
|
||||
<el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="cover" />
|
||||
</div>
|
||||
<div class="land-info">
|
||||
<div class="land-info-pos">
|
||||
<div class="land-info-c">
|
||||
<div class="land-name txt-ellipsis clamp2">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
|
||||
<div class="tag-list">
|
||||
<el-tag type="primary" size="small">现场核实</el-tag>
|
||||
<el-tag type="primary" size="small">官方发布</el-tag>
|
||||
<el-tag type="primary" size="small">优质地源</el-tag>
|
||||
</div>
|
||||
<div class="type-list">
|
||||
<div class="type-val">100亩</div>
|
||||
<div class="type-val">耕地</div>
|
||||
<div class="type-val">蔬菜瓜果类</div>
|
||||
<div class="type-val">水浇地</div>
|
||||
<div class="type-val">10年起租</div>
|
||||
</div>
|
||||
<div class="addr">
|
||||
<div class="iconfont icon-location"></div>
|
||||
{{ '临沧市·耿马县' }}
|
||||
</div>
|
||||
<div class="land-do">
|
||||
<div class="price txt-ellipsis clamp">25.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const toDetail = () => {
|
||||
let id = '01';
|
||||
router.push('/sub-operation-service/landDetail?id' + id);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.c-land-item-warp {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
.land-img,
|
||||
.land-info {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.land-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
::v-deep() {
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.land-info {
|
||||
width: calc(100% - 200px);
|
||||
padding-left: 16px;
|
||||
height: 200px;
|
||||
.land-info-pos {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
.land-info-c {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.land-name {
|
||||
margin-bottom: 3px;
|
||||
font-size: 16px;
|
||||
color: $color-666;
|
||||
}
|
||||
.tag-list {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.el-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.type-list {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.type-val {
|
||||
display: inline-block;
|
||||
margin: 3px 8px 0 0;
|
||||
font-size: 14px;
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
.addr {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
font-size: 20px;
|
||||
color: $color-666;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.land-do {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
.price {
|
||||
width: calc(100% - 0px);
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
padding-right: 8px;
|
||||
color: $color-main;
|
||||
font-weight: 700;
|
||||
}
|
||||
.price::before {
|
||||
content: '￥';
|
||||
font-size: 16px !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
.price::after {
|
||||
content: '/年';
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
sub-operation-service/src/views/ecommerce/components/typetop.vue
Normal file
125
sub-operation-service/src/views/ecommerce/components/typetop.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="type-top-warp">
|
||||
<div class="filter-item">
|
||||
<div class="single-item">
|
||||
<div class="item-title">{{ titleVal || ' ' }}</div>
|
||||
<div class="single-li all" :class="!select ? 'li-act' : ''" @click="selectAll()">全部</div>
|
||||
<div class="not-all">
|
||||
<div
|
||||
v-for="(m, indexm) in listVal"
|
||||
:key="indexm"
|
||||
class="single-li"
|
||||
:class="select && select.id == m.id ? 'li-act' : ''"
|
||||
@click="selectItem(m)"
|
||||
>
|
||||
{{ m.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
//唯一标识
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '选择分类',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select']);
|
||||
|
||||
let listVal = reactive([]);
|
||||
|
||||
let titleVal = ref(props.title);
|
||||
let nameVal = ref(props.name);
|
||||
|
||||
let select = ref(null);
|
||||
|
||||
watch(
|
||||
() => (props.list, props.title, props.name),
|
||||
() => {
|
||||
listVal = props.list;
|
||||
titleVal.value = props.title;
|
||||
nameVal.value = props.name;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
const selectItem = (item) => {
|
||||
select.value = item || null;
|
||||
emit('select', { select: select.value, nameVal: nameVal.value });
|
||||
};
|
||||
|
||||
const selectAll = (key) => {
|
||||
select.value = null;
|
||||
emit('select', { select: select.value, nameVal: nameVal.value });
|
||||
};
|
||||
|
||||
const clearSelect = () => {
|
||||
select.value = null;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
clearSelect,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.type-top-warp {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.filter-item {
|
||||
width: 100%;
|
||||
}
|
||||
.single-item {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
.item-title {
|
||||
display: -webkit-inline-box;
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
vertical-align: top;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
}
|
||||
.single-li {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
font-size: 18px;
|
||||
&.all {
|
||||
width: 60px;
|
||||
}
|
||||
&.li-act {
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
.not-all {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: calc(100% - 180px);
|
||||
flex-wrap: wrap;
|
||||
.single-li {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,328 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="land-index-warp">
|
||||
<common current-name="land">
|
||||
<template #main>
|
||||
<div>土地交易</div>
|
||||
<banner :imglist="bannerList"></banner>
|
||||
<div class="land-filter-top">
|
||||
<div v-if="!isHide">
|
||||
<typetop ref="arearef" :list="LevelOne" :name="'area'" title="选择地区" @select="doSelect"></typetop>
|
||||
<typetop ref="uesdref" :list="landUse" :name="'uesd'" title="选择土地" @select="doSelect"></typetop>
|
||||
<typetop ref="typeref" :list="landType" :name="'type'" title="土地用途" @select="doSelect"></typetop>
|
||||
<typetop ref="productref" :list="landProduct" :name="'product'" title="种养殖产物" @select="doSelect"></typetop>
|
||||
<typetop ref="circulationref" :list="landCirculation" :name="'circulation'" title="土地流转" @select="doSelect"></typetop>
|
||||
<div class="more-filter">
|
||||
<div class="more-title">更多</div>
|
||||
<div class="filter-r">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-select v-model="fliter.area" placeholder="请选择面积范围" style="width: 200px">
|
||||
<el-option v-for="item in areaRange" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-select v-model="fliter.year" placeholder="请选择流转年限" style="width: 200px">
|
||||
<el-option v-for="m in yearList" :key="m.value" :label="m.label" :value="m.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-select v-model="fliter.lookType" placeholder="请选择预约带看" style="width: 200px">
|
||||
<el-option v-for="n in lookType" :key="n.value" :label="n.label" :value="n.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin: 16px 0">
|
||||
<el-radio-group v-model="fliter.other">
|
||||
<el-radio v-for="(k, index) in radioList" :key="index" :value="k.value">{{ k.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select-result">
|
||||
<div class="title">所选分类</div>
|
||||
<div class="result-list">
|
||||
<template v-for="(r, indexr) in selectkeylist" :key="indexr">
|
||||
<div class="result-item">
|
||||
<el-tag closable :type="'info'" @close="handleClose(r)">
|
||||
{{ selectAll[r] && selectAll[r].title ? selectAll[r].title : '' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div class="show-hide" @click="doShowHide">
|
||||
<el-icon v-if="!isHide"><ArrowUpBold /></el-icon>
|
||||
<el-icon v-else><ArrowDownBold /></el-icon>
|
||||
<span>{{ isHide ? '展开' : '收起' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bottom">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12" align="left">
|
||||
<div class="result-count">
|
||||
共匹配到
|
||||
<span class="count">{{ '0' }}</span>
|
||||
个结果
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" align="right">
|
||||
<div class="do-set">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
<span>重置</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="land-reuslt-list">
|
||||
<el-row class="land-item-warp" :gutter="24">
|
||||
<template v-for="(land, indexl) in 11" :key="indexl">
|
||||
<el-col :span="12">
|
||||
<landItem></landItem>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ecommerce">
|
||||
import common from './components/common.vue';
|
||||
import banner from './components/banner.vue';
|
||||
import typetop from './components/typetop.vue';
|
||||
import landItem from './components/landItem.vue';
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
|
||||
let LevelOne = reactive([
|
||||
{ id: '01', title: '耿马镇' },
|
||||
{ id: '02', title: '孟定镇' },
|
||||
{ id: '03', title: '孟永镇' },
|
||||
{ id: '04', title: '孟撒镇' },
|
||||
{ id: '05', title: '勐简乡' },
|
||||
{ id: '06', title: '大兴乡' },
|
||||
{ id: '07', title: '四排山乡' },
|
||||
{ id: '08', title: '贺派乡' },
|
||||
]);
|
||||
|
||||
let landUse = reactive([
|
||||
{ id: '01', title: '耕地' },
|
||||
{ id: '02', title: '林地' },
|
||||
{ id: '03', title: '园地' },
|
||||
{ id: '04', title: '草地' },
|
||||
{ id: '05', title: '交通运输用地' },
|
||||
{ id: '06', title: '水域水利设施用地' },
|
||||
{ id: '07', title: '其他用地' },
|
||||
]);
|
||||
|
||||
let landType = reactive([
|
||||
{ id: '01', title: '水田' },
|
||||
{ id: '02', title: '水浇地' },
|
||||
{ id: '03', title: '旱地' },
|
||||
]);
|
||||
|
||||
let landProduct = reactive([
|
||||
{ id: '01', title: '水果坚果类' },
|
||||
{ id: '02', title: '蔬菜瓜果类' },
|
||||
{ id: '03', title: '粮食油料类' },
|
||||
{ id: '04', title: '养殖类' },
|
||||
{ id: '05', title: '其他' },
|
||||
]);
|
||||
|
||||
let landCirculation = reactive([
|
||||
{ id: '01', title: '经营权出租' },
|
||||
{ id: '02', title: '经营权合作' },
|
||||
{ id: '03', title: '经营权入股' },
|
||||
{ id: '04', title: '经营权转让' },
|
||||
{ id: '05', title: '经营权互换' },
|
||||
{ id: '06', title: '经营权转包' },
|
||||
{ id: '07', title: '使用权出租' },
|
||||
{ id: '08', title: '使用权转让' },
|
||||
{ id: '09', title: '使用权入股' },
|
||||
{ id: '10', title: '使用权合作' },
|
||||
]);
|
||||
let radioList = reactive([
|
||||
{ value: '01', label: '电话核实' },
|
||||
{ value: '02', label: '现场核实' },
|
||||
{ value: '03', label: '现场视频' },
|
||||
{ value: '04', label: '官方发布' },
|
||||
{ value: '05', label: '金牌地源' },
|
||||
{ value: '06', label: '优质地源' },
|
||||
{ value: '07', label: '地区商家' },
|
||||
]);
|
||||
|
||||
let areaRange = reactive([
|
||||
{ value: '0', label: '10亩以下' },
|
||||
{ value: '10', label: '10 ~ 100亩' },
|
||||
{ value: '100', label: '101 ~ 1000亩' },
|
||||
{ value: '1000', label: '1001 ~ 5000亩' },
|
||||
{ value: '5000', label: '5000亩以上' },
|
||||
]);
|
||||
|
||||
let yearList = reactive([
|
||||
{ value: '0', label: '5年以下' },
|
||||
{ value: '5', label: '6 ~ 10年' },
|
||||
{ value: '10', label: '11 ~ 15年' },
|
||||
{ value: '15', label: '16 ~ 20年' },
|
||||
{ value: '20', label: '21 ~ 30年' },
|
||||
{ value: '30', label: '30年以上' },
|
||||
]);
|
||||
|
||||
let lookType = reactive([
|
||||
{ value: 'reservation', babel: '可预约带看' },
|
||||
{ value: 'pay', babel: '单词付费带看' },
|
||||
{ value: 'bond', babel: '保证金带看' },
|
||||
]);
|
||||
|
||||
let bannerList = reactive(['images/ecommerce/' + 'banner3.png', 'images/ecommerce/' + 'banner3.png']);
|
||||
let isHide = ref(false);
|
||||
let fliter = reactive({
|
||||
area: null,
|
||||
year: null,
|
||||
lookType: null,
|
||||
other: null,
|
||||
});
|
||||
|
||||
let selectAll = reactive({});
|
||||
const doSelect = (data) => {
|
||||
let { select, nameVal } = data;
|
||||
selectAll[nameVal] = select;
|
||||
console.info('doSelect', data);
|
||||
};
|
||||
|
||||
let selectkeylist = computed(() => {
|
||||
let list = Object.keys(selectAll);
|
||||
return list;
|
||||
});
|
||||
|
||||
let arearef = ref(null);
|
||||
let uesdref = ref(null);
|
||||
let typeref = ref(null);
|
||||
let productref = ref(null);
|
||||
let circulationref = ref(null);
|
||||
|
||||
const refs = {
|
||||
arearef,
|
||||
uesdref,
|
||||
typeref,
|
||||
productref,
|
||||
circulationref,
|
||||
};
|
||||
|
||||
const handleClose = (name) => {
|
||||
if (name) {
|
||||
let refName = name + 'ref';
|
||||
const componentRef = refs[refName];
|
||||
console.info(' componentRef.value', componentRef.value);
|
||||
componentRef.value && componentRef.value.clearSelect();
|
||||
delete selectAll[name];
|
||||
}
|
||||
};
|
||||
|
||||
const doShowHide = () => {
|
||||
isHide.value = !isHide.value;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.land-index-warp {
|
||||
width: 100%;
|
||||
.land-filter-top {
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
padding: 16px;
|
||||
|
||||
.more-filter {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
.filter-r,
|
||||
.more-title {
|
||||
display: -webkit-inline-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.more-title {
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
vertical-align: top;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
}
|
||||
.filter-r {
|
||||
}
|
||||
}
|
||||
|
||||
.select-result {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.title,
|
||||
.result-list {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.title {
|
||||
display: -webkit-inline-box;
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
vertical-align: top;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
}
|
||||
.result-list {
|
||||
width: calc(100% - 120px);
|
||||
padding-right: 30px;
|
||||
position: relative;
|
||||
.result-item {
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
}
|
||||
.show-hide {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
.el-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-bottom {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.result-count {
|
||||
font-size: 18px;
|
||||
color: $color-666;
|
||||
.count {
|
||||
color: $color-main;
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
.do-set {
|
||||
font-size: 16px;
|
||||
color: $color-666;
|
||||
.el-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.land-reuslt-list {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
.land-item-warp {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
113
sub-operation-service/src/views/ecommerce/landDetail.vue
Normal file
113
sub-operation-service/src/views/ecommerce/landDetail.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="land-detail-warp">
|
||||
<common current-name="land">
|
||||
<template #main> </template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ecommerce">
|
||||
import common from './components/common.vue';
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.land-detail-warp {
|
||||
width: 100%;
|
||||
.land-filter-top {
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
padding: 16px;
|
||||
|
||||
.more-filter {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
.filter-r,
|
||||
.more-title {
|
||||
display: -webkit-inline-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.more-title {
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
vertical-align: top;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
}
|
||||
.filter-r {
|
||||
}
|
||||
}
|
||||
|
||||
.select-result {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.title,
|
||||
.result-list {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.title {
|
||||
display: -webkit-inline-box;
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
vertical-align: top;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
}
|
||||
.result-list {
|
||||
width: calc(100% - 120px);
|
||||
padding-right: 30px;
|
||||
position: relative;
|
||||
.result-item {
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
}
|
||||
.show-hide {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
.el-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-bottom {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.result-count {
|
||||
font-size: 18px;
|
||||
color: $color-666;
|
||||
.count {
|
||||
color: $color-main;
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
.do-set {
|
||||
font-size: 16px;
|
||||
color: $color-666;
|
||||
.el-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.land-reuslt-list {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
.land-item-warp {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -31,7 +31,7 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="tableData" style="width: 100%" height="320">
|
||||
<el-table :data="tableData" style="width: 100%" height="320" @row-click="rowClick">
|
||||
<el-table-column prop="title" label="采购品种" />
|
||||
<el-table-column prop="region" label="收货地" />
|
||||
<el-table-column prop="buyer" label="采购方" />
|
||||
@ -39,7 +39,7 @@
|
||||
<el-table-column prop="buyer" label="采购时间" />
|
||||
<el-table-column fixed="right" label="操作">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="small" @click="handleClick"> 去报价 </el-button>
|
||||
<el-button link type="primary" size="small" @click.stop="handleClick"> 去报价 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -60,6 +60,9 @@ import marketCharts from './components/marketCharts.vue';
|
||||
import purchaserPopup from './components/purchaserPopup.vue';
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
import { getRegion } from '@/apis/index';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
let treeList = reactive([
|
||||
{
|
||||
@ -204,16 +207,20 @@ let filter = ref({
|
||||
});
|
||||
|
||||
let tableData = reactive([
|
||||
{ title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
|
||||
{ title: '白菜', region: '孟定镇', buyer: '星悦农业', buyNum: 6000, time: '2025-04-01 12:25:36' },
|
||||
{ title: '西蓝花', region: '孟勇镇', buyer: '盛源农业', buyNum: 7000, time: '2025-04-02 13:25:36' },
|
||||
{ title: '鸡蛋', region: '勐简乡', buyer: '上好佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
|
||||
{ title: '牛肉', region: '四排山乡', buyer: '尚嘉农业', buyNum: 5000, time: '2025-03-31 12:25:36' },
|
||||
{ title: '氮肥', region: '大兴乡', buyer: '信誉农资', buyNum: 6000, time: '2025-04-02 12:25:36' },
|
||||
{ title: '白菜种子', region: '贺派乡', buyer: '佳佳农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
|
||||
{ title: '西红柿种子', region: '勐撒镇', buyer: '佳佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
|
||||
{ id: '01', title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
|
||||
{ id: '02', title: '白菜', region: '孟定镇', buyer: '星悦农业', buyNum: 6000, time: '2025-04-01 12:25:36' },
|
||||
{ id: '03', title: '西蓝花', region: '孟勇镇', buyer: '盛源农业', buyNum: 7000, time: '2025-04-02 13:25:36' },
|
||||
{ id: '04', title: '鸡蛋', region: '勐简乡', buyer: '上好佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
|
||||
{ id: '05', title: '牛肉', region: '四排山乡', buyer: '尚嘉农业', buyNum: 5000, time: '2025-03-31 12:25:36' },
|
||||
{ id: '06', title: '氮肥', region: '大兴乡', buyer: '信誉农资', buyNum: 6000, time: '2025-04-02 12:25:36' },
|
||||
{ id: '07', title: '白菜种子', region: '贺派乡', buyer: '佳佳农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
|
||||
{ id: '08', title: '西红柿种子', region: '勐撒镇', buyer: '佳佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
|
||||
]);
|
||||
|
||||
const rowClick = (data) => {
|
||||
router.push('/sub-operation-service/purchaserDetail?id=' + data.id);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.info('onMounted');
|
||||
getTree();
|
||||
|
||||
484
sub-operation-service/src/views/ecommerce/purchaserDetail.vue
Normal file
484
sub-operation-service/src/views/ecommerce/purchaserDetail.vue
Normal file
@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<div class="purchaser-detail-warp">
|
||||
<common current-name="purchaser">
|
||||
<template #main>
|
||||
<div class="purchaser-detail-top">
|
||||
<div class="top-title">
|
||||
<div class="father-title">采购商服务</div>
|
||||
<div class="current-title">采购详情</div>
|
||||
</div>
|
||||
<div class="purchaser-info">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="16">
|
||||
<div class="purchaser-info-l">
|
||||
<div class="img">
|
||||
<el-image :src="getAssetsFile('images/ecommerce/' + 'test01.png')" fit="cover" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="title-warp">
|
||||
<div class="txt txt-ellipsis clamp2">耿马县勐简乡飘云生态农业耿马县勐简乡飘云生态农业</div>
|
||||
<div class="icon-warp">
|
||||
<div class="iconfont icon-level"></div>
|
||||
<div class="iconfont icon-auth"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-auth">
|
||||
<span>已实名认证</span>
|
||||
</div>
|
||||
<div class="settled-time">
|
||||
<span>入驻时间：37天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="purchaser-info-r">
|
||||
<div class="addr">
|
||||
{{ '南省临沧市耿马傣族佤族自治县耿马县勐简乡' }}
|
||||
<div class="iconfont icon-location"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="56" class="purchase-info-total">
|
||||
<el-col :span="12">
|
||||
<div class="info-total-item">
|
||||
<div class="label">采购品种：</div>
|
||||
<div class="val">西红柿</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="info-total-item">
|
||||
<div class="label">采购数量：</div>
|
||||
<div class="val">5000kg</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="info-total-item">
|
||||
<div class="label">期望货源地：</div>
|
||||
<div class="val">耿马县·贺派乡</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="info-total-item">
|
||||
<div class="label">浏览次数：</div>
|
||||
<div class="val">188次</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="info-total-item">
|
||||
<div class="label">期望货源地：</div>
|
||||
<div class="val">耿马县·贺派乡</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="info-total-item">
|
||||
<div class="label">更新时间：</div>
|
||||
<div class="val">2025.01.01 12:15:18</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="contant-wrap">
|
||||
<el-col :span="24">
|
||||
<div class="contant-btn">
|
||||
<div class="iconfont icon-bg-chat"></div>
|
||||
<span>在线联系</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hot-list-warp">
|
||||
<div class="block-title">热门采购</div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="tableData" style="width: 100%" height="320">
|
||||
<el-table-column prop="title" label="采购品种" />
|
||||
<el-table-column prop="region" label="收货地" />
|
||||
<el-table-column prop="buyer" label="采购方" />
|
||||
<el-table-column prop="buyNum" label="采购量(kg)" />
|
||||
<el-table-column prop="buyer" label="采购时间" />
|
||||
<el-table-column fixed="right" label="操作">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="small" @click.stop="handleClick"> 去报价 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
|
||||
<purchaserPopup ref="popupQuote" :list="treeList"></purchaserPopup>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ecommerce">
|
||||
import common from './components/common.vue';
|
||||
import purchaserPopup from './components/purchaserPopup.vue';
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
|
||||
let popupQuote = ref(null);
|
||||
let treeList = reactive([
|
||||
{
|
||||
id: '01',
|
||||
title: '农产品',
|
||||
children: [
|
||||
{
|
||||
pId: '01',
|
||||
id: '0101',
|
||||
title: '植物性农产品',
|
||||
children: [
|
||||
{ pId: '0101', id: '010101', title: '谷物' },
|
||||
{ pId: '0101', id: '010102', title: '蔬菜' },
|
||||
{ pId: '0101', id: '010103', title: '水果' },
|
||||
{ pId: '0101', id: '010104', title: '坚果与油料作物' },
|
||||
{ pId: '0101', id: '010105', title: '糖料作物' },
|
||||
{ pId: '0101', id: '010106', title: '纤维作物' },
|
||||
{ pId: '0101', id: '010107', title: '茶叶' },
|
||||
{ pId: '0101', id: '010108', title: '咖啡' },
|
||||
{ pId: '0101', id: '010109', title: '香料' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
id: '0102',
|
||||
title: '动物性农产品',
|
||||
children: [
|
||||
{ pId: '0102', id: '010201', title: '肉类' },
|
||||
{ pId: '0102', id: '010202', title: '奶制品' },
|
||||
{ pId: '0102', id: '010203', title: '蛋类' },
|
||||
{ pId: '0102', id: '010204', title: '蜂蜜' },
|
||||
{ pId: '0102', id: '010205', title: '水产品' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
id: '0103',
|
||||
title: '特殊农产品',
|
||||
children: [
|
||||
{ pId: '0103', id: '010301', title: '花卉与苗木' },
|
||||
{ pId: '0103', id: '010302', title: '药材' },
|
||||
{ pId: '0103', id: '010303', title: '菌类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
id: '0104',
|
||||
title: '其他',
|
||||
children: [{ pId: '0104', id: '010401', title: '饲料' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
title: '种子种苗',
|
||||
children: [
|
||||
{
|
||||
pId: '02',
|
||||
id: '0101',
|
||||
title: '花卉种子种苗',
|
||||
children: [
|
||||
{ pId: '0101', id: '010101', title: '草本花卉' },
|
||||
{ pId: '0101', id: '010102', title: '木本花卉' },
|
||||
{ pId: '0101', id: '010103', title: '野生花卉' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
id: '0102',
|
||||
title: '蔬菜种子种苗',
|
||||
children: [
|
||||
{ pId: '0102', id: '010201', title: '叶菜类' },
|
||||
{ pId: '0102', id: '010202', title: '根茎类' },
|
||||
{ pId: '0102', id: '010203', title: '果实类' },
|
||||
{ pId: '0102', id: '010204', title: '豆类' },
|
||||
{ pId: '0102', id: '010205', title: '瓜类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
id: '0103',
|
||||
title: '果树种苗',
|
||||
children: [
|
||||
{ pId: '0103', id: '010301', title: '柑橘类' },
|
||||
{ pId: '0103', id: '010302', title: '仁果类' },
|
||||
{ pId: '0103', id: '010303', title: '核果类' },
|
||||
{ pId: '0103', id: '010304', title: '浆果类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
id: '0104',
|
||||
title: '药材种子与种苗',
|
||||
children: [
|
||||
{ pId: '0104', id: '010401', title: '寒地龙药' },
|
||||
{ pId: '0104', id: '010402', title: '常见中药材' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
id: '0105',
|
||||
title: '其他作物',
|
||||
children: [
|
||||
{ pId: '0105', id: '010501', title: '牧草' },
|
||||
{ pId: '0105', id: '010502', title: '经济作物' },
|
||||
{ pId: '0105', id: '010503', title: '观赏树木' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
let tableData = reactive([
|
||||
{ title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
|
||||
{ title: '白菜', region: '孟定镇', buyer: '星悦农业', buyNum: 6000, time: '2025-04-01 12:25:36' },
|
||||
{ title: '西蓝花', region: '孟勇镇', buyer: '盛源农业', buyNum: 7000, time: '2025-04-02 13:25:36' },
|
||||
{ title: '鸡蛋', region: '勐简乡', buyer: '上好佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
|
||||
// { title: '牛肉', region: '四排山乡', buyer: '尚嘉农业', buyNum: 5000, time: '2025-03-31 12:25:36' },
|
||||
// { title: '氮肥', region: '大兴乡', buyer: '信誉农资', buyNum: 6000, time: '2025-04-02 12:25:36' },
|
||||
// { title: '白菜种子', region: '贺派乡', buyer: '佳佳农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
|
||||
// { title: '西红柿种子', region: '勐撒镇', buyer: '佳佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
|
||||
]);
|
||||
|
||||
const handleClick = () => {
|
||||
popupQuote.value && popupQuote.value.doShow();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.info('onMounted');
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.purchaser-detail-warp {
|
||||
width: 100%;
|
||||
.block-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.purchaser-detail-top {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
.top-title {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.father-title,
|
||||
.current-title {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-weight: 700;
|
||||
}
|
||||
.father-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.current-title {
|
||||
font-size: 16px;
|
||||
color: $color-main;
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.current-title::before {
|
||||
content: '.';
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.purchaser-info {
|
||||
margin: 16px 0;
|
||||
.purchaser-info-l {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.img,
|
||||
.content {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: calc(100% - 160px);
|
||||
padding-left: 16px;
|
||||
.title-warp {
|
||||
width: 100%;
|
||||
.txt,
|
||||
.icon-warp {
|
||||
vertical-align: top;
|
||||
}
|
||||
.txt {
|
||||
width: calc(100% - 80px);
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.icon-warp {
|
||||
display: inline-block;
|
||||
|
||||
width: 80px;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
&.icon-level {
|
||||
font-size: 26px;
|
||||
color: $color-main;
|
||||
}
|
||||
&.icon-auth {
|
||||
font-size: 28px;
|
||||
color: $color-warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-auth {
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
span {
|
||||
background: $color-main-table-header;
|
||||
border: 1px solid $color-main-border;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
color: $color-main;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.settled-time {
|
||||
width: 100%;
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: $color-999;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.purchaser-info-r {
|
||||
.addr {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: $color-666;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.purchase-info-total {
|
||||
.info-total-item {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
margin: 8px 0;
|
||||
.label,
|
||||
.val {
|
||||
display: -webkit-inline-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.label {
|
||||
color: $color-999;
|
||||
font-size: 18px;
|
||||
max-width: 180px;
|
||||
}
|
||||
.val {
|
||||
font-size: 20px;
|
||||
max-width: calc(100% - 180px);
|
||||
color: $color-666;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contant-wrap {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
.contant-btn {
|
||||
background: $color-main;
|
||||
padding: 0 16px;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
color: $color-fff;
|
||||
display: inline-block;
|
||||
.iconfont,
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 26px;
|
||||
}
|
||||
span {
|
||||
padding-left: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-list-warp {
|
||||
background: $color-fff;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
margin: 16px 0;
|
||||
|
||||
::v-deep() {
|
||||
thead {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
thead th {
|
||||
background: $color-main-table-header;
|
||||
color: $color-999 !important;
|
||||
border: none !important;
|
||||
padding: 16px 0;
|
||||
}
|
||||
thead th:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
border-bottom-left-radius: 16px;
|
||||
}
|
||||
thead th:last-child {
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
table {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
tbody td {
|
||||
border: none !important;
|
||||
}
|
||||
.el-table__inner-wrapper::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user