“页面样式修改”

This commit is contained in:
zmj 2023-12-13 18:55:18 +08:00
parent 883df22b42
commit 7c5d95e37a
16 changed files with 254 additions and 38 deletions

12
App.vue
View File

@ -57,6 +57,18 @@
box-sizing: border-box; box-sizing: border-box;
} }
.te {
width: 40vw;
/* 容器宽度 */
white-space: nowrap;
/* 文字不换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
// .uni-tabbar .uni-tabbar__icon { // .uni-tabbar .uni-tabbar__icon {
// width: 80rpx !important; // width: 80rpx !important;
// height: 80rpx !important; // height: 80rpx !important;

View File

@ -1,14 +1,56 @@
<template> <template>
<view class=""> <view class="" style="margin-top: 10rpx;">
<view class="" style="display: flex;align-items: center;height: 50rpx;">
<u--image src="/static/main/index/dw.png" width="25rpx" height="30rpx"
style="margin-right: 10rpx;"></u--image>
{{info.title}} {{info.title}}
</view>
<view class="info">
<view class="info-li" style="background-image: url('/static/main/index/tdmj1.png');">
当前种植
<view class="">
{{info.kindarea|| info.total_area-info.residual_area}}
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/index/tdmj1.png');">
土地面积
<view class="">
{{info.total_area}}
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/index/tdfzr.png');">
当地负责人
<view class="">
{{info.master_name}}
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/index/fzrdh.png');">
负责人电话
<view class="">
{{info.master_phone}}
</view>
</view>
<view class="info-li" v-if="isDetail" style="background-image: url('/static/main/index/dqzz.png');">
种植品种
<view class="">
{{info.kind}}
</view>
</view>
<view class="info-li" v-if="isDetail" style="background-image: url('/static/main/index/pin_pai.png');">
种植品牌
<view class="">
{{info.breed}}
</view>
</view>
</view>
</view> </view>
<view class="card"> <!-- <view class="card">
<view class="tit"> <view class="tit">
<view class=""> <view class="">
{{info.title}} {{info.title}}
@ -55,9 +97,9 @@
联系方式: {{info.master_phone}} 联系方式: {{info.master_phone}}
</view> </view>
</view> </view> -->
</view> <!-- </view> -->
@ -71,6 +113,7 @@
} from "vue"; } from "vue";
const props = defineProps({ const props = defineProps({
info: Object, info: Object,
isDetail: Boolean
}) })
@ -83,6 +126,21 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.info-li {
width: 223rpx;
height: 129rpx;
border-radius: 10rpx;
background-size: 100% 100%;
padding: 20rpx;
margin-bottom: 20rpx;
}
}
.card { .card {
// width: 710rpx; // width: 710rpx;
margin: 0 auto; margin: 0 auto;

View File

@ -1,13 +1,25 @@
<template> <template>
<view class="content"> <view class="content">
<view class="content-con-a" v-if="datalist.length>0"> <view class="content-con-a" v-if="datalist.length>0">
<view class="shop_action"> <view class="shop_action">
<view class="" v-for="(item,i) in datalist"> <view class="" v-for="(item,i) in datalist">
<view class="shop_action-title"> <view class=" tit">
{{item.type_text}} {{item.type_text}}
</view> </view>
<view class="shop_action-detail" v-if="item.type!=3&&item.type!=5"> <view class="shop_action-detail" v-if="item.type!=3&&item.type!=5">
<view class="action-detail">
<view class="title">
施肥面积
</view>
<view class="detail">
{{item.detail.area}}
</view>
</view>
<view class="action-detail"> <view class="action-detail">
<view class="title"> <view class="title">
{{item.type_text.slice(0, -2)}}<text class="" {{item.type_text.slice(0, -2)}}<text class=""
@ -68,8 +80,19 @@
</view> </view>
<view class="detail-img" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0"> <view class="detail-img" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0">
<image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
</image> <u-swiper :list="item.detail.pic" @click="hdClick" indicator indicatorMode="dot"
circular></u-swiper>
<!-- <image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
</image> -->
</view> </view>
</view> </view>
</view> </view>
@ -159,6 +182,9 @@
</view> </view>
</view> </view>
</view> </view>
</template> </template>
@ -196,6 +222,8 @@
if (res.code == 1) { if (res.code == 1) {
datalist.splice(0, datalist.length, ...res.data) datalist.splice(0, datalist.length, ...res.data)
res.data.detai
// console.log(res.data)
} }
}); });
}; };
@ -215,6 +243,10 @@
urls: url urls: url
}) })
} }
const hdClick = (e) => {
console.log(e)
}
</script> </script>
@ -322,4 +354,23 @@
} }
} }
.tit {
position: relative;
padding-left: 20rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.tit::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 3px;
/* 左边框的宽度 */
height: 30rpx;
background-color: #34D08D;
}
</style> </style>

View File

@ -56,8 +56,8 @@
<view class=""> <view class="">
<text style="color: black;">种植面积:</text> {{item.area}} <text style="color: black;">种植面积:</text> {{item.area}}
</view> </view>
<view class=""> <view class="te">
<text style="color: black;">参与人:</text> {{item.user}} <text style="color: black;white-space: nowrap;">参与人:</text> {{item.user}}
</view> </view>
<view class=""> <view class="">
<text style="color: black;">种植日期:</text> {{item.plant_date}} <text style="color: black;">种植日期:</text> {{item.plant_date}}

View File

@ -1,19 +1,19 @@
<template> <template>
<view class="box"> <view class="box">
<view class="content"> <view class="content">
<view class="video" @click="navto('/pages/live/live')"> <view class="" style="display: flex;justify-content: space-between;">
<!-- <u--image :src="url" width="100%" height="300rpx"></u--image> --> <view class="tit">
<u-swiper :list="dataobj.datapic" width="100%" height="300rpx"></u-swiper> 苗情监测数据
</view> </view>
<view class="time"> <view class="" style="display: flex;">
<u-icon name="clock"></u-icon> <u-icon name="clock" style="margin-right: 10rpx;"></u-icon>
<text>刷新时间: {{getNowTimeFn()}} </text> <text>刷新时间: {{getNowTimeFn()}} </text>
</view> </view>
<view class="add-thing" @click="showPicker=true" v-if="palnttype">
记农事
</view> </view>
<view class="" style="margin-bottom: 30rpx;" v-else></view> <view class="video" @click="navto('/pages/live/live')">
<landInfo :info='dataobj'></landInfo> <u--image :src="url" width="100%" height="300rpx"></u--image>
</view>
<landInfo :info='dataobj' :isDetail='true'></landInfo>
<view class=""> <view class="">
@ -21,23 +21,70 @@
操作信息 操作信息
</view> </view>
<view class="" v-if="dataList1.length>0"> <view class="" v-if="dataList1.length>0">
<view class="thing-card" v-for="(item,index) in dataList1" :key="index"> <view class="thing-card" v-for="(item,index) in dataList1" :key="index"
<view class="head"> @click="navtoForm(item,item.type)">
<!-- <view class="head">
<view class=""> <view class="">
{{item.type_text}} {{item.type_text}}
</view> </view>
<view class="" @click="navtoForm(item,item.type)"> <view class="" @click="navtoForm(item,item.type)">
农事查看 农事查看
</view> </view>
</view> </view> -->
<view class="card_body"> <view class="card_body">
<view class="left"> <view class="left" style="position: relative;">
<u--image @click="perviewFn(item.detail.pic)" radius='10' :src="item.detail.pic[0]" <u--image @click="perviewFn(item.detail.pic)" radius='10' :src="item.detail.pic[0]"
width="200rpx" height="200rpx"></u--image> width="200rpx" height="200rpx"></u--image>
<view class="stick-img" style="background-color: red;">
<!-- dsf -->
<u--image :src="stickImgFn(item.type)" class="stick-img" width="100rpx"
height="100rpx"></u--image>
</view>
</view>
<view class="right" style="color:#7B7B7B ;">
<view class="" v-if="item.type !=5">
<text style="color: black;">{{actionTypeFn(item.type)}}: </text>
<text
v-if="item.type==3">{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}</text>
<text v-else>{{item.detail.kind}}</text>
</view>
<view class="">
<text style="color: black;">参与人员</text>{{item.detail.user}}
<view class="" v-if='item.type==5'>
<text style="color: black;">收获日期:</text> {{item.update_time.slice(0,10)}}
</view>
</view>
<view class="" v-if="item.type !=5">
<view class="">
<text style="color: black;">开始日期</text>{{item.detail.start_date}}
</view>
<view class="">
<text style="color: black;">结束日期</text>{{item.detail.end_date}}
</view>
</view>
<view class="te">
<text style="color: black;white-space: nowrap;">备注</text>{{item.detail.remark}}
</view>
<!-- <view class="" v-if="item.type==5">
<view class="">
参与人: {{item.detail.user}}
</view> </view>
<view class="right">
<view class="" v-if="item.type==5">
<view class=""> <view class="">
参与人: {{item.detail.user}} 参与人: {{item.detail.user}}
</view> </view>
@ -48,16 +95,19 @@
<view class="" v-else> <view class="" v-else>
<view class="" v-if="!item.detail.type"> <view class="" v-if="!item.detail.type">
<view class=""> <view class="">
{{item.type_text.slice(0, -2)}}<text class="" v-if="item.type==2||item.type==4"></text>种类: {{item.detail.kind}} {{item.type_text.slice(0, -2)}}<text class=""
v-if="item.type==2||item.type==4"></text>种类: {{item.detail.kind}}
</view> </view>
<view class=""> <view class="">
{{item.type_text.slice(0, -2)}}<text class="" v-if="item.type==2||item.type==4"></text>品牌: {{item.detail.breed}} {{item.type_text.slice(0, -2)}}<text class=""
v-if="item.type==2||item.type==4"></text>品牌: {{item.detail.breed}}
</view> </view>
<view class="" v-if='item.detail.dosage'> <view class="" v-if='item.detail.dosage'>
{{item.type_text.slice(0, -2)}}<text class="" v-if="item.type==2||item.type==4"></text>用量: {{item.detail.dosage}} {{item.type_text.slice(0, -2)}}<text class=""
v-if="item.type==2||item.type==4"></text>用量: {{item.detail.dosage}}
<text v-if='item.type==4'></text> <text v-if='item.type==4'></text>
<text v-if='item.type!=4&&item.type!=5'></text> <text v-if='item.type!=4&&item.type!=5'></text>
@ -69,7 +119,8 @@
<view class="" v-if="item.type==3"> <view class="" v-if="item.type==3">
{{item.type_text.slice(0, -2)}}方式: {{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}} {{item.type_text.slice(0, -2)}}方式:
{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}
</view> </view>
<view class=""> <view class="">
参与人: {{item.detail.user}} 参与人: {{item.detail.user}}
@ -84,7 +135,10 @@
<view class="" v-if="item.detail.remark"> <view class="" v-if="item.detail.remark">
备注: {{item.detail.remark}} 备注: {{item.detail.remark}}
</view> </view>
</view> </view> -->
</view> </view>
</view> </view>
@ -315,6 +369,21 @@
urls: url urls: url
}) })
} }
const actionTypeFn = (type) => {
if (type == 3) return "喷灌方式"
if (type == 4) return "除虫剂种类"
if (type == 2) return "除草剂种类"
if (type == 1) return "肥料种类"
if (type == 5) return "收获"
}
const stickImgFn = (type) => {
if (type == 3) return "/static/main/index/guan_gai.png"
if (type == 4) return "/static/main/index/chu_chong.png"
if (type == 2) return "/static/main/index/chu_cao.png"
if (type == 1) return "/static/main/index/shi_fei.png"
if (type == 5) return "/static/main/index/shou_huo.png"
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -401,7 +470,6 @@
.card_body { .card_body {
padding: 20rpx; padding: 20rpx;
display: flex; display: flex;
// justify-content: space-between;
.right { .right {
display: flex; display: flex;
@ -409,6 +477,33 @@
flex-direction: column; flex-direction: column;
margin-left: 40rpx; margin-left: 40rpx;
} }
.stick-img {
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
} }
}
.tit {
position: relative;
padding-left: 20rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.tit::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 3px;
/* 左边框的宽度 */
height: 30rpx;
background-color: #34D08D;
}
</style> </style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/main/index/dqzz.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/main/index/dw.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 620 B

BIN
static/main/index/fzrdh.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
static/main/index/tdfzr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/main/index/tdmj1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB