You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
6.1 KiB
166 lines
6.1 KiB
12 months ago
|
<style lang="less" scoped>
|
||
|
|
.container{
|
||
|
|
min-height: 100%;
|
||
|
|
background:#f6f6f6;
|
||
|
|
padding-top:30rpx;
|
||
|
|
.card{
|
||
|
|
margin-top:0;
|
||
|
|
position:relative;
|
||
|
|
&:before{
|
||
|
|
position:absolute;
|
||
|
|
height:34rpx;
|
||
|
|
line-height: 34rpx;
|
||
|
|
width:133rpx;
|
||
|
|
text-align: center;
|
||
|
|
color:#fff;
|
||
|
|
top:0;
|
||
|
|
right:0;
|
||
|
|
}
|
||
|
|
&.handle:before{
|
||
|
|
content:"已处理";
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66.965' height='17.019' viewBox='0 0 66.965 17.019'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%2310c176;%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(-215 -495.575)'%3E%3Cpath class='a' d='M218.295,495.627s-.028,3.42,0,3.45c.036-.036,6.616,0,6.616,0s.032,3.089,0,3.059h-2.17s-.015,3.341,0,3.379c-.036-.036,3.344,0,3.344,0s-.021.044,0,3.628h-3.344s-.072,3.442,0,3.365c.071.036,59.224.085,59.224.085v-8.346a9.109,9.109,0,0,0-8.4-8.62C273.261,495.511,218.295,495.627,218.295,495.627Z'/%3E%3Ccircle class='a' cx='1.5' cy='1.5' r='1.5' transform='translate(217 502.1)'/%3E%3Cellipse class='a' cx='1.5' cy='1.725' rx='1.5' ry='1.725' transform='translate(217 495.62)'/%3E%3Cellipse class='a' cx='1.5' cy='1.7' rx='1.5' ry='1.7' transform='translate(221 509.12)'/%3E%3Cellipse class='a' cx='1.5' cy='1.705' rx='1.5' ry='1.705' transform='translate(221.4 502.1)'/%3E%3Crect class='a' width='5' height='3' rx='1.5' transform='translate(215 509)'/%3E%3C/g%3E%3C/svg%3E");
|
||
|
|
}
|
||
|
|
&.unhandle:before{
|
||
|
|
content:"未处理";
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66.965' height='17.019' viewBox='0 0 66.965 17.019'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23cd0916;%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(-215 -495.575)'%3E%3Cpath class='a' d='M218.295,495.627s-.028,3.42,0,3.45c.036-.036,6.616,0,6.616,0s.032,3.089,0,3.059h-2.17s-.015,3.341,0,3.379c-.036-.036,3.344,0,3.344,0s-.021.044,0,3.628h-3.344s-.072,3.442,0,3.365c.071.036,59.224.085,59.224.085v-8.346a9.109,9.109,0,0,0-8.4-8.62C273.261,495.511,218.295,495.627,218.295,495.627Z'/%3E%3Ccircle class='a' cx='1.5' cy='1.5' r='1.5' transform='translate(217 502.1)'/%3E%3Cellipse class='a' cx='1.5' cy='1.725' rx='1.5' ry='1.725' transform='translate(217 495.62)'/%3E%3Cellipse class='a' cx='1.5' cy='1.7' rx='1.5' ry='1.7' transform='translate(221 509.12)'/%3E%3Cellipse class='a' cx='1.5' cy='1.705' rx='1.5' ry='1.705' transform='translate(221.4 502.1)'/%3E%3Crect class='a' width='5' height='3' rx='1.5' transform='translate(215 509)'/%3E%3C/g%3E%3C/svg%3E");
|
||
|
|
}
|
||
|
|
.item{
|
||
|
|
&+.item{
|
||
|
|
border-top:2rpx solid rgba(216, 216, 216, 0.2);
|
||
|
|
}
|
||
|
|
text-indent:0;
|
||
|
|
padding:10rpx 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
.label{
|
||
|
|
flex-shrink: 0;
|
||
|
|
margin-right:20rpx;
|
||
|
|
color:#777;
|
||
|
|
}
|
||
|
|
&.block{
|
||
|
|
flex-direction: column;
|
||
|
|
.label{
|
||
|
|
margin-bottom:20rpx;
|
||
|
|
}
|
||
|
|
.imgs{
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-right:-20rpx;
|
||
|
|
image{
|
||
|
|
width:calc(100%/3 - 20rpx);
|
||
|
|
margin-right:20rpx;
|
||
|
|
height:160rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.dec{
|
||
|
|
background:#F7F7F7;
|
||
|
|
color:#999;
|
||
|
|
font-size:28rpx;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
padding:20rpx;
|
||
|
|
}
|
||
|
|
map{
|
||
|
|
width:100%;
|
||
|
|
height:372rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
.cu-btn{
|
||
|
|
margin-top:40rpx;
|
||
|
|
height:60rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.d-form /deep/{
|
||
|
|
.u-form-item{
|
||
|
|
color:red;
|
||
|
|
}
|
||
|
|
.u-form-item__body{
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="card handle">
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">位置</text>
|
||
|
|
<text class="val">壹号基地东南角</text>
|
||
|
|
</view>
|
||
|
|
<view class="item block">
|
||
|
|
<text class="label">凭证</text>
|
||
|
|
<view class="imgs">
|
||
|
|
<image v-for="i in 3" :key="i" src="https://alipic.lanhuapp.com/XDSlicePNGMAX19c3c750caf3b1448e14c56df8485f5ca6f3d6bbef600208f2d1156d5eaec38a.png"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-read-more :showHeight="0" toggle closeText="展开" color="#777">
|
||
|
|
<view class="item block">
|
||
|
|
<text class="label">描述</text>
|
||
|
|
<text class="dec">这里是描述......</text>
|
||
|
|
</view>
|
||
|
|
<view class="item block">
|
||
|
|
<text class="label">经纬度</text>
|
||
|
|
<map id="amap" :longitude="102.722475" :latitude="25.077679"/>
|
||
|
|
</view>
|
||
|
|
<view class="item block">
|
||
|
|
<text class="label">是否处理</text>
|
||
|
|
<u-radio-group v-model="demo" activeColor="#10C176">
|
||
|
|
<u-radio label="是" name="1" :customStyle="{marginRight: '8px'}"/>
|
||
|
|
<u-radio label="否" name="0"/>
|
||
|
|
</u-radio-group>
|
||
|
|
<button class="cu-btn round bg-green shadow submit" @click="sumbit">保存修改</button>
|
||
|
|
</view>
|
||
|
|
</u-read-more>
|
||
|
|
</view>
|
||
|
|
<view class="card unhandle">
|
||
|
|
<view class="item">
|
||
|
|
<text class="label">位置</text>
|
||
|
|
<text class="val">壹号基地东南角</text>
|
||
|
|
</view>
|
||
|
|
<view class="item block">
|
||
|
|
<text class="label">凭证</text>
|
||
|
|
<view class="imgs">
|
||
|
|
<image v-for="i in 3" :key="i" src="https://alipic.lanhuapp.com/XDSlicePNGMAX19c3c750caf3b1448e14c56df8485f5ca6f3d6bbef600208f2d1156d5eaec38a.png"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-read-more :showHeight="0" toggle closeText="展开">
|
||
|
|
<view class="item block">
|
||
|
|
<text class="label">描述</text>
|
||
|
|
<text class="dec">这里是描述......</text>
|
||
|
|
</view>
|
||
|
|
<view class="item block">
|
||
|
|
<text class="label">经纬度</text>
|
||
|
|
<map id="amap" :longitude="102.722475" :latitude="25.077679"/>
|
||
|
|
</view>
|
||
|
|
<view class="item block">
|
||
|
|
<text class="label">是否处理</text>
|
||
|
|
<u-radio-group v-model="demo" activeColor="#10C176">
|
||
|
|
<u-radio label="是" name="1" :customStyle="{marginRight: '8px'}"/>
|
||
|
|
<u-radio label="否" name="0"/>
|
||
|
|
</u-radio-group>
|
||
|
|
</view>
|
||
|
|
</u-read-more>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
map:null,
|
||
|
|
demo:""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async onReady(){
|
||
|
|
/* #ifdef APP-PLUS */
|
||
|
|
var amap=uni.createMapContext("amap",this)
|
||
|
|
this.map=amap.$getAppMap()
|
||
|
|
var marker=new plus.maps.Marker(new plus.maps.Point(102.722475, 25.077679))
|
||
|
|
marker.setLabel('asdasf')
|
||
|
|
this.maps.addOverlay(marker)
|
||
|
|
/* #endif */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|