Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

仓库地址更换-电商交易修改

Browse Source
This commit is contained in:
lzc 2025-04-08 16:29:47 +08:00
parent 9afdb1f03e
commit c09647f6a8
14 changed files with 767 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sub-government-screen-service/.env.production
View File

@ -1,6 +1,6 @@
# 生产环境
VITE_APP_MIAN = 'daimp-front-main'
VITE_APP_MIAN_URL = 'http://47.109.205.240:80'
VITE_APP_MIAN_URL = 'http://47.109.205.240:88'
VITE_APP_NAME = 'sub-government-screen-service'
# 接口
VITE_APP_BASE_API = '/apis'

2
sub-government-screen-service/src/utils/permission.js
View File

@ -17,8 +17,6 @@ NProgress.configure({ showSpinner: false });
const { VITE_APP_MIAN_URL } = import.meta.env;
const whiteList = [];
router.beforeEach(async (to, from, next) => {
console.info('beforeEach************to', to);
console.info('beforeEach**********from', from);
NProgress.start();
if (typeof to.meta.title === 'string') {
document.title = '数据大屏 | ' + to.meta.title;

2
sub-operation-service/.env.production
View File

@ -1,6 +1,6 @@
# 生产环境
VITE_APP_MIAN = 'daimp-front-main'
VITE_APP_MIAN_URL = 'http://47.109.205.240:80'
VITE_APP_MIAN_URL = 'http://47.109.205.240:88'
VITE_APP_NAME = 'sub-operation-service'
# 接口
VITE_APP_BASE_API = '/apis'

1
sub-operation-service/src/router/index.js
View File

@ -101,7 +101,6 @@ export const constantRoutes = [
},
],
},
...demo,
];
/**

1
sub-operation-service/src/store/modules/user.js
View File

@ -47,6 +47,7 @@ export const useUserStore = defineStore({
return !isEmpty(this.menus) ? JSON.parse(decode(this.menus, true)) : [];
},
logout() {
console.info('sub-operation-service*****************退出登录');
this.token = null;
this.userInfo = {};
this.currentOrg = null;

2
sub-operation-service/src/styles/global.scss
View File

@ -8,7 +8,7 @@ $color-000:#000;
$color-fff:#fff;
$color-primary: #20a0ff;
$color-success: #13ce66;
$color-warning: #f7ba2a;
$color-warning: #FFBE4D;
$color-danger: #ff4949;
$color-info: #50bfff;
$color-secondary: #2e90fe;

30
sub-operation-service/src/styles/iconfont.css
View File

File diff suppressed because one or more lines are too long

9
sub-operation-service/src/utils/axios.js
View File

@ -71,8 +71,10 @@ publicAxios.interceptors.request.use(async (config) => {
* @param res
* @returns
*/
const formatResult = (res) => {
const formatResult = async (res) => {
const code = res.data.code || res.status;
// console.info('formatResult', code)
const UserStore = useUserStore();
switch (code) {
case 200:
case 0:
@ -83,6 +85,11 @@ const formatResult = (res) => {
// code === 1 或 500 代表存在错误
ElNotification.error(res.data.message);
break;
case 401:
// code === 401 代表登录过期
await UserStore.logout();
router.push('/login');
break;
default:
ElNotification.error(res.data.message);
break;

4
sub-operation-service/src/utils/permission.js
View File

@ -22,8 +22,8 @@ router.beforeEach(async (to, from, next) => {
}
const userStore = useUserStore();
const hasToken = true;
const hasToken = userStore.hasToken();
console.log('sub-operation-service************hasToken', hasToken);
if (hasToken) {
if (to.path === '/login') {
// 如果已登录，请重定向到主页

57
sub-operation-service/src/views/ecommerce/components/backDivider.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="c-back-divide-warp">
<div class="process-top">
<div class="top-line-pos">
<div class="top-txt">{{ title || '--' }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const props = defineProps({
title: { type: String, default: ' ' },
});
</script>
<style lang="scss" scoped>
.c-back-divide-warp {
width: 100%;
.process-top {
display: inline-flex;
justify-content: center;
width: 100%;
.top-line-pos {
display: inline-flex;
justify-content: flex-start;
position: relative;
.top-txt {
font-size: 24px;
font-weight: 700;
padding: 0 56px;
}
.top-txt::before,
.top-txt::after {
content: '';
display: inline-block;
width: 40px;
height: 4px;
top: 50%;
transform: translateY(-50%);
position: absolute;
border-radius: 8px;
}
.top-txt::before {
background: linear-gradient(270deg, $color-main, $color-main-table-header);
left: 0;
}
.top-txt::after {
background: linear-gradient(270deg, $color-main-table-header, $color-main);
right: 0;
}
}
}
}
</style>

10
sub-operation-service/src/views/ecommerce/components/banner.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="ecommerce-banner" :style="{ height: height }">
<el-carousel height="height" motion-blur>
<el-carousel height="height" motion-blur :indicator-position="indicatorPos" :arrow="arrow">
<el-carousel-item v-for="(item, index) in list" :key="index">
<img :src="getAssetsFile(item)" />
</el-carousel-item>
@ -20,6 +20,14 @@ const props = defineProps({
return [];
},
},
indicatorPos: {
type: String,
default: '',
},
arrow: {
type: String,
default: 'hover',
},
});
let nameVal = ref(props.name);

2
sub-operation-service/src/views/ecommerce/components/landItem.vue
View File

@ -39,7 +39,7 @@ const router = useRouter();
const toDetail = () => {
let id = '01';
router.push('/sub-operation-service/landDetail?id' + id);
router.push('/sub-operation-service/landDetail?id=' + id);
};
</script>
<style lang="scss" scoped>

104
sub-operation-service/src/views/ecommerce/components/signProcess.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<div class="c-sign-process-warp">
<backDivider title="签约流程"></backDivider>
<div class="process-content">
<div v-for="(n, index) in processList" :key="n.name" class="process-content-item">
<div class="pro-content">
<div class="iconfont" :class="'icon-' + n.icon"></div>
<div class="content-txt">
<div class="txt-title">{{ n.title || '--' }}</div>
<div class="txt-tips">{{ n.tips || '--' }}</div>
</div>
</div>
<div v-if="index < processList.length - 1" class="pro-arrow">
<div class="arrow-before"></div>
<div class="triangle"></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import backDivider from './backDivider.vue';
const route = useRoute();
const router = useRouter();
const processList = reactive([
{ title: '发起签约', tips: 'App端下单，支付款项', icon: 'edit', name: 'one' },
{ title: '地主接单', tips: '沟通合同事项', icon: 'accept', name: 'one' },
{ title: '签约合同', tips: '上传凭证至平台', icon: 'sign', name: 'one' },
{ title: '上传凭证至平台', tips: '平台结算', icon: 'finish', name: 'one' },
]);
</script>
<style lang="scss" scoped>
.c-sign-process-warp {
width: 100%;
margin: 16px 0;
.process-content {
display: inline-flex;
width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
.process-content-item {
display: inline-block;
margin: 12px 0;
.pro-content,
.pro-arrow {
display: inline-block;
vertical-align: middle;
}
.pro-content {
border: 1px solid $color-main;
padding: 8px 12px;
border-radius: 16px;
.iconfont,
.content-txt {
display: inline-block;
vertical-align: middle;
}
.iconfont {
font-size: 30px;
color: $color-main;
}
.content-txt {
padding-left: 8px;
.txt-title {
color: $color-main;
font-size: 18px;
font-weight: 700;
}
.txt-tips {
font-weight: 400;
margin-top: 8px;
}
}
}
.pro-arrow {
position: relative;
margin: 0 48px;
.arrow-before {
display: inline-block;
width: 40px;
height: 12px;
background: linear-gradient(270deg, $color-main, $color-main-table-header);
}
.triangle {
display: inline-block;
width: 0;
height: 0;
border-left: 24px solid $color-main; /* 左侧边框，透明 */
border-top: 12px solid transparent; /* 右侧边框，透明 */
border-bottom: 12px solid transparent;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-52%);
}
}
}
}
}
</style>

631
sub-operation-service/src/views/ecommerce/landDetail.vue
View File

@ -1,113 +1,588 @@
<template>
<div class="land-detail-warp">
<common current-name="land">
<template #main> </template>
<template #main>
<div class="land-detail-info">
<div class="top-title">
<div class="father-title">土地交易</div>
<div class="current-title">查看详情</div>
</div>
<div class="top-info">
<el-row :gutter="16">
<el-col :span="12">
<banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px"> </banner>
</el-col>
<el-col :span="12" class="top-info-txt">
<h1 class="title">耿马县勐简乡100亩水浇地经营权出租</h1>
<div class="price">2000.0/年</div>
<div class="tag-list">
<div class="tag-item">
<div class="iconfont icon-see"></div>
888次
</div>
<div class="tag-item">
<div class="iconfont icon-ci"></div>
T88888888
</div>
<div class="tag-item">
<div class="iconfont icon-time"></div>
2025.01.01
</div>
</div>
<div class="tips-list">
<el-row :gutter="16">
<el-col :span="12">土地类型：耕地/水浇地</el-col>
<el-col :span="12">流转类型：经营权出租</el-col>
<el-col :span="12">流转年限：25年</el-col>
<el-col :span="12">土地面积：100亩</el-col>
</el-row>
</div>
<div class="addr-info">
<div class="iconfont icon-location"></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="land-detail-content">
<backDivider title="土地详情"></backDivider>
<div class="detail-content">
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-voucher"></div>
<span class="key-txt">凭证</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="6" class="content-val-item">
<div class="val-label">全书类型：</div>
<div class="val-val txt-ellipsis clamp1">国有</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">权证类型：</div>
<div class="val-val txt-ellipsis clamp1">农地证</div>
</el-col>
<el-col :span="10" class="content-val-item">
<div class="val-label">权证有效期：</div>
<div class="val-val txt-ellipsis clamp1">2018年~2050年</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-landform"></div>
<span class="key-txt">地形地貌</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">地形坡度：</div>
<div class="val-val txt-ellipsis clamp1">>25°</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">海拔高度：</div>
<div class="val-val txt-ellipsis clamp1">500~1000m</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">方位：</div>
<div class="val-val txt-ellipsis clamp1">不限</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">地貌：</div>
<div class="val-val txt-ellipsis clamp1">不详</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">地块形状：</div>
<div class="val-val txt-ellipsis clamp1">大面积不规则</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">机械化工作：</div>
<div class="val-val txt-ellipsis clamp1">部分可以</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">平整程度：</div>
<div class="val-val txt-ellipsis clamp1">粗平</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">排水条件：</div>
<div class="val-val txt-ellipsis clamp1">充分满足</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">灌溉条件：</div>
<div class="val-val txt-ellipsis clamp1">充分满足</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-soil"></div>
<span class="key-txt">土壤土质</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">表层土壤质地：</div>
<div class="val-val txt-ellipsis clamp1">砂土</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤肥力：</div>
<div class="val-val txt-ellipsis clamp1">高</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">有效涂层厚度：</div>
<div class="val-val txt-ellipsis clamp1">60~100cm</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤盐渍化状况：</div>
<div class="val-val txt-ellipsis clamp1">无盐渍化</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤污辱状况：</div>
<div class="val-val txt-ellipsis clamp1">无污染</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤酸碱度：</div>
<div class="val-val txt-ellipsis clamp1">PH=7</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤有机含量：</div>
<div class="val-val txt-ellipsis clamp1">20~30g/kg</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">距碍物层深度：</div>
<div class="val-val txt-ellipsis clamp1">>100cm</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">地下水埋深：</div>
<div class="val-val txt-ellipsis clamp1">10~20m</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">植被群落覆盖度：</div>
<div class="val-val txt-ellipsis clamp1">50%~75%</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-climate"></div>
<span class="key-txt">气候降雨</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">气候类型：</div>
<div class="val-val txt-ellipsis clamp1">亚寒带针叶林气候</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">日照时长：</div>
<div class="val-val txt-ellipsis clamp1">3200~3300h/年</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">日照率：</div>
<div class="val-val txt-ellipsis clamp1">充分</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">年平气温：</div>
<div class="val-val txt-ellipsis clamp1">10~20℃</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">无霜期：</div>
<div class="val-val txt-ellipsis clamp1">200~250/天</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">降雨量：</div>
<div class="val-val txt-ellipsis clamp1">75~100mm</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">湿度：</div>
<div class="val-val txt-ellipsis clamp1">稍微湿润</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-car"></div>
<span class="key-txt">交通情况</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">道路情况：</div>
<div class="val-val txt-ellipsis clamp1">机耕道</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">机场：</div>
<div class="val-val txt-ellipsis clamp1">30~60min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">高速公路：</div>
<div class="val-val txt-ellipsis clamp1">30~60min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">港口：</div>
<div class="val-val txt-ellipsis clamp1">>60min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">高铁：</div>
<div class="val-val txt-ellipsis clamp1">>60分钟</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">省级/州级公路：</div>
<div class="val-val txt-ellipsis clamp1">30~60min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">国道：</div>
<div class="val-val txt-ellipsis clamp1">10~30min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">县级公路：</div>
<div class="val-val txt-ellipsis clamp1">15min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">乡镇公路：</div>
<div class="val-val txt-ellipsis clamp1">15min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">村道/自建路：</div>
<div class="val-val txt-ellipsis clamp1">15min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">公交：</div>
<div class="val-val txt-ellipsis clamp1">无</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-more"></div>
<span class="key-txt">其他配套</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">电力设施：</div>
<div class="val-val txt-ellipsis clamp1">有电源可牵线</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">供水设施：</div>
<div class="val-val txt-ellipsis clamp1">自然水</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">灌溉设施：</div>
<div class="val-val txt-ellipsis clamp1">人工</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">附属设施：</div>
<div class="val-val txt-ellipsis clamp1">晾晒场</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">场地平整：</div>
<div class="val-val txt-ellipsis clamp1">起伏小</div>
</el-col>
<el-col :span="10" class="content-val-item">
<div class="val-label">相关配套：</div>
<div class="val-val txt-ellipsis clamp1">农副产品批发市场</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-landoperate"></div>
<span class="key-txt">经营信息</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">适合何种经营：</div>
<div class="val-val txt-ellipsis clamp1">种植作物</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">地块利用现状：</div>
<div class="val-val txt-ellipsis clamp1">种植</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">当地劳动力资源：</div>
<div class="val-val txt-ellipsis clamp1">一般</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">税收优惠：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">最低收购政策：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">农业补贴：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">牧业补贴：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">贷款补贴：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
</el-row>
</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 signProcess from './components/signProcess.vue';
import backDivider from './components/backDivider.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';
let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);
</script>
<style lang="scss" scoped>
.land-detail-warp {
width: 100%;
.land-filter-top {
.land-detail-info {
width: 100%;
border-radius: 16px;
margin-bottom: 16px;
background: $color-fff;
padding: 16px;
.more-filter {
display: inline-flex;
justify-content: flex-start;
border-radius: 16px;
overflow: hidden;
padding: 10px;
.top-title {
width: 100%;
.filter-r,
.more-title {
display: -webkit-inline-box;
vertical-align: top;
text-align: left;
.father-title,
.current-title {
display: inline-block;
vertical-align: middle;
font-weight: 700;
}
.more-title {
color: $color-999;
font-size: 20px;
width: 120px;
vertical-align: top;
font-weight: 500;
line-height: 40px;
.father-title {
font-size: 18px;
}
.filter-r {
.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%);
}
}
.select-result {
display: inline-flex;
justify-content: flex-start;
width: 100%;
.top-info {
margin: 16px 0;
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;
::v-deep() {
.ecommerce-banner {
padding: 0 48px !important;
position: relative;
}
.show-hide {
.el-carousel {
position: unset !important;
}
.el-carousel__arrow--left {
left: 0 !important;
}
.el-carousel__arrow--right {
right: 0 !important;
}
}
}
.price {
color: $color-main;
font-size: 32px;
position: relative;
padding: 0 16px;
margin: 16px 0;
}
.price::before {
content: '￥';
font-size: 16px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.tag-list {
color: $color-999;
display: inline-flex;
width: 100%;
justify-content: flex-start;
gap: 10px;
.tag-item {
position: relative;
padding-left: 32px;
.iconfont {
position: absolute;
right: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 16px;
.el-icon {
&.icon-see {
font-size: 24px;
}
&.icon-ci {
font-size: 20px;
}
&.icon-time {
font-size: 24px;
}
}
font-size: 16px;
line-height: 32px;
}
}
.tips-list {
font-size: 16px;
line-height: 24px;
margin: 16px 0;
}
.addr-info {
font-size: 20px;
.iconfont {
display: inline-block;
vertical-align: middle;
font-size: 26px;
color: $color-666;
}
}
.top-btn {
.item-btn {
margin: 8px 24px 8px 0;
display: inline-block;
line-height: 42px;
color: $color-fff;
padding: 0 24px;
border-radius: 12px;
font-size: 20px;
margin-top: 16px;
&.sign {
background: $color-main;
}
&.reservation {
background: $color-warning;
}
}
}
.land-detail-content {
width: 100%;
text-align: left;
.detail-content {
.detail-content-item {
width: 100%;
margin: 16px 0;
}
.detail-content-key,
.detail-content-val {
display: inline-block;
vertical-align: top;
}
.detail-content-key {
width: 150px;
.iconfont {
display: inline-block;
vertical-align: middle;
color: $color-main;
&.icon-voucher {
font-size: 36px;
}
&.icon-landform {
font-size: 32px;
}
&.icon-soil {
font-size: 36px;
}
&.icon-climate {
font-size: 36px;
}
&.icon-car {
font-size: 38px;
}
&.icon-more {
font-size: 28px;
}
&.icon-landoperate {
font-size: 28px;
}
}
.key-txt {
display: inline-flex;
text-align: center;
vertical-align: middle;
font-size: 22px;
font-weight: bold;
transform: skewX(-8deg);
-webkit-background-clip: text;
color: $color-333;
letter-spacing: 2px;
text-shadow: -1px 0 0 $color-main-table-header;
font-style: oblique;
padding-left: 16px;
}
}
.detail-content-val {
width: calc(100% - 150px);
padding-left: 16px;
.content-val-item {
font-size: 16px;
font-weight: 400;
line-height: 32px;
.val-label,
.val-val {
display: -webkit-inline-box;
vertical-align: middle;
}
.val-label {
color: $color-666;
max-width: 150px;
}
.val-val {
text-align: right;
max-width: calc(100% - 100px);
}
}
}
}
}
}
.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>