修改页面样式
This commit is contained in:
978184212@qq.com
parent
a47eab0d42
commit
6b37bb3300
|
|
@ -33,6 +33,22 @@
|
|||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<radio-group name="radio" class="radio-group" @change="radioChange">
|
||||
<label class="radio-label">
|
||||
<radio value="radio1" color="#0f6efe" class="radio-item" />
|
||||
<text class="radio-text">日</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="radio2" color="#0f6efe" class="radio-item" />
|
||||
<text class="radio-text">月</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="radio3" color="#0f6efe" class="radio-item" />
|
||||
<text class="radio-text">年</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="qstcontent">
|
||||
<uni-ec-canvas :ec="ec" canvas-id="multi-charts-pie"></uni-ec-canvas>
|
||||
</view>
|
||||
|
|
@ -127,7 +143,7 @@
|
|||
array1: [],
|
||||
arrays: [],
|
||||
list: [],
|
||||
tabList: ['站点名称', '告警指标', '指标值','告警时间'],
|
||||
tabList: ['站点名称', '告警指标', '指标值', '告警时间'],
|
||||
pjlist: [],
|
||||
ec: {
|
||||
option: {
|
||||
|
|
@ -205,8 +221,8 @@
|
|||
stationName1: '',
|
||||
stationCode1: null,
|
||||
stationCode: '',
|
||||
arrays1:[],
|
||||
zxtdata:[]
|
||||
arrays1: [],
|
||||
zxtdata: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -216,7 +232,6 @@
|
|||
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
|
||||
var navigationHeight = 44 * pxToRpxScale
|
||||
this.height = res.windowHeight * pxToRpxScale //将px 转换rpx
|
||||
console.log(this.height, ktxStatusHeight, navigationHeight)
|
||||
this.scorllheight = this.height
|
||||
}
|
||||
});
|
||||
|
|
@ -233,12 +248,10 @@
|
|||
this.array = []
|
||||
this.arrays = []
|
||||
this.array1 = ['全部监测站点', ]
|
||||
this.arrays1 = [
|
||||
{
|
||||
label:'全部监测站点',
|
||||
value:''
|
||||
}
|
||||
]
|
||||
this.arrays1 = [{
|
||||
label: '全部监测站点',
|
||||
value: ''
|
||||
}]
|
||||
this.$http.get('/applet/survStationInfo/list').then(res => {
|
||||
for (var i = 0; i < res.data.data.length; i++) {
|
||||
this.arrays.push({
|
||||
|
|
@ -251,7 +264,6 @@
|
|||
})
|
||||
this.array.push(res.data.data[i].stationName)
|
||||
this.array1.push(res.data.data[i].stationName)
|
||||
// console.log(this.array,this.array1)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -281,32 +293,26 @@
|
|||
data[i].miao = data[i].times[5];
|
||||
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
|
||||
.fen
|
||||
if(data[i].alertContent.indexOf('监测数据名称:') != -1){
|
||||
data[i].alertContent = data[i].alertContent.replace('监测数据名称:','')
|
||||
if (data[i].alertContent.indexOf('监测数据名称:') != -1) {
|
||||
data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
|
||||
}
|
||||
}
|
||||
this.list = this.list.concat(data)
|
||||
this.total = res.data.data.total
|
||||
if (res.data.data.total != 0) {
|
||||
this.allNum = Number(res.data.data.total) / Number(this.pageSize) + '';
|
||||
console.log(this.allNum, '总页数')
|
||||
if (this.allNum.indexOf('.') == -1) {
|
||||
this.allNum = this.allNum;
|
||||
console.log(this.allNum, 'if')
|
||||
} else {
|
||||
this.allNum = parseInt(Number(this.allNum) + 1);
|
||||
console.log(this.allNum, 'else')
|
||||
}
|
||||
console.log(this.pageNo, this.allNum, '156156')
|
||||
if (this.pageNo == this.allNum) {
|
||||
this.isLastpage = true;
|
||||
this.loadStatus = 'nomore'
|
||||
console.log(this.isLastpage, 'true', 'nomore')
|
||||
} else {
|
||||
this.isLastpage = false;
|
||||
// this.isLoadMore=true
|
||||
this.loadStatus = 'more'
|
||||
console.log(this.isLastpage, 'false')
|
||||
}
|
||||
} else {
|
||||
this.isLastpage = true;
|
||||
|
|
@ -319,7 +325,6 @@
|
|||
},
|
||||
// 分页加载
|
||||
lower() {
|
||||
console.log("最后一页了，取消下拉功能");
|
||||
// 最后一页了，取消下拉功能
|
||||
if (this.isLastpage) {
|
||||
return
|
||||
|
|
@ -329,7 +334,6 @@
|
|||
this.intervalId = setInterval(() => {
|
||||
num = num + 1;
|
||||
}, 1000)
|
||||
console.log(this.intervalId, num)
|
||||
this.pageNo = this.pageNo + 1;
|
||||
let params = {}
|
||||
params.pageNo = this.pageNo
|
||||
|
|
@ -351,8 +355,8 @@
|
|||
data[i].miao = data[i].times[5];
|
||||
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
|
||||
.fen
|
||||
if(data[i].alertContent.indexOf('监测数据名称:') != -1){
|
||||
data[i].alertContent = data[i].alertContent.replace('监测数据名称:','')
|
||||
if (data[i].alertContent.indexOf('监测数据名称:') != -1) {
|
||||
data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
|
||||
}
|
||||
}
|
||||
this.list = this.list.concat(data)
|
||||
|
|
@ -360,12 +364,10 @@
|
|||
if (this.pageNo == this.allNum) {
|
||||
this.isLastpage = true;
|
||||
this.loadStatus = 'nomore'
|
||||
console.log(this.isLastpage, 'true')
|
||||
} else {
|
||||
this.isLastpage = false;
|
||||
// this.isLoadMore=true
|
||||
this.loadStatus = 'more'
|
||||
console.log(this.isLastpage, 'false')
|
||||
}
|
||||
} else {
|
||||
this.isLastpage = true;
|
||||
|
|
@ -386,6 +388,10 @@
|
|||
}
|
||||
})
|
||||
},
|
||||
// 选择年月日
|
||||
radioChange(e){
|
||||
console.log("选择年月日.......",e)
|
||||
},
|
||||
// 获取折线图
|
||||
gettj() {
|
||||
if (!this.stationCode) {
|
||||
|
|
@ -393,11 +399,9 @@
|
|||
}
|
||||
this.$http.post('/applet/wxclient/getPplutionSummry?stationCode=' + this.stationCode).then(res => {
|
||||
this.zxtdata = res.data.data[0]
|
||||
console.log(this.array[this.index],'弄哦文')
|
||||
this.ec.option.legend.data = ['总磷', '总氮','硝态氮']
|
||||
this.ec.option.legend.data = ['总磷', '总氮', '硝态氮']
|
||||
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF']
|
||||
this.ec.option.series = [
|
||||
{
|
||||
this.ec.option.series = [{
|
||||
name: '总磷',
|
||||
type: 'line',
|
||||
stack: 'Total1',
|
||||
|
|
@ -476,11 +480,10 @@
|
|||
data: this.zxtdata.NOSummry
|
||||
},
|
||||
]
|
||||
if(this.array[this.index].indexOf('畜禽') != -1){
|
||||
this.ec.option.legend.data = ['总磷', '总氮','COD','氨氮']
|
||||
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF','#FF3B3B']
|
||||
this.ec.option.series = [
|
||||
{
|
||||
if (this.array[this.index].indexOf('畜禽') != -1) {
|
||||
this.ec.option.legend.data = ['总磷', '总氮', 'COD', '氨氮']
|
||||
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF', '#FF3B3B']
|
||||
this.ec.option.series = [{
|
||||
name: '总磷',
|
||||
type: 'line',
|
||||
stack: 'Total1',
|
||||
|
|
@ -590,7 +593,6 @@
|
|||
},
|
||||
// 折线图切换站点
|
||||
bindPickerChange: function(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.index = e.detail.value
|
||||
this.stationName = this.array[this.index]
|
||||
for (var i = 0; i < this.arrays.length; i++) {
|
||||
|
|
@ -602,7 +604,6 @@
|
|||
},
|
||||
// 预警切换站点
|
||||
bindPickerChange1: function(e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.index1 = e.detail.value
|
||||
this.stationName1 = this.array1[this.index1]
|
||||
for (var i = 0; i < this.arrays.length; i++) {
|
||||
|
|
@ -876,22 +877,25 @@
|
|||
padding-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.tabitem:first-child{
|
||||
.tabitem:first-child {
|
||||
width: 31%;
|
||||
// text-align: center
|
||||
}
|
||||
.tabitem:nth-child(2){
|
||||
|
||||
.tabitem:nth-child(2) {
|
||||
width: 27%;
|
||||
// text-align: center
|
||||
}
|
||||
.tabitem:nth-child(3){
|
||||
|
||||
.tabitem:nth-child(3) {
|
||||
width: 19%;
|
||||
// text-align: center
|
||||
}
|
||||
.tabitem:nth-child(4){
|
||||
flex:1
|
||||
// text-align: center
|
||||
|
||||
.tabitem:nth-child(4) {
|
||||
flex: 1 // text-align: center
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -955,6 +959,7 @@
|
|||
text-overflow: ellipsis;
|
||||
// text-align: center
|
||||
}
|
||||
|
||||
.load {
|
||||
// height: 50rpx;
|
||||
// line-height: 50rpx;
|
||||
|
|
@ -965,4 +970,65 @@
|
|||
.pagebot {
|
||||
height: 100rpx;
|
||||
}
|
||||
// 选择年月日
|
||||
.radio-group {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 20rpx 32rpx 0;
|
||||
background: #F6F9FF;
|
||||
border-radius: 16rpx;
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background: rgba(15, 110, 254, 0.1);
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
transform: scale(0.9);
|
||||
|
||||
// 选中状态样式
|
||||
&.radio-checked {
|
||||
background-color: #0f6efe;
|
||||
border-color: #0f6efe;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
color: #667482;
|
||||
margin-left: 16rpx;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
// 选中状态的文字样式
|
||||
// .radio-item[checked] + .radio-text {
|
||||
// color: #0f6efe;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
// 适配暗色模式
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.radio-group {
|
||||
background: #1a1a1a;
|
||||
|
||||
.radio-label {
|
||||
.radio-text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.radio-item[checked] + .radio-text {
|
||||
color: #0f6efe;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,63 +11,28 @@
|
|||
</scroll-view>
|
||||
</view>
|
||||
<block v-if="isActive == 1">
|
||||
<view class="liebiaos" v-if="">
|
||||
<view class="searchbox">
|
||||
<image src="../../static/meishi_icon_sousuo.png" mode=""></image>
|
||||
<input class="search_input" v-model="deviceNo" placeholder="请输入要搜索的设备编号">
|
||||
<view class="searchbutton" @click="changenr()">
|
||||
搜索
|
||||
<view class="uni-px-8 uni-pb-8">
|
||||
<text>设备选择：</text>
|
||||
<uni-data-select v-model="value" :localdata="rangeList" @change="change"></uni-data-select>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liebiaos" v-if="List.length != 0">
|
||||
<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
|
||||
<view class="itembox" v-for="(item,index) in List" :key="index">
|
||||
<view class="itembox_top">
|
||||
<view class="itembox_lef" v-if="item.deviceNo">
|
||||
<!-- <image src="../../static/fz.png" mode=""></image> -->
|
||||
<view class="title">
|
||||
编号：{{item.deviceNo}}
|
||||
<view class="example-body">
|
||||
<text>时间区间：</text>
|
||||
<uni-datetime-picker v-model="rangetime" type="daterange" @maskClick="maskClick" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itembox_bot">
|
||||
<view class="bot_item" v-if="item.flg">
|
||||
<span class="nrbt">报警原因:</span>
|
||||
<view class="bj" v-if="item.deviceStatus == 1">
|
||||
{{item.flg}}
|
||||
</view>
|
||||
<view class="jcbj" v-if="item.deviceStatus == 0">
|
||||
{{item.flg}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot_item" v-if="item.userDeviceNo">
|
||||
<span class="nrbt">用户设备编号:</span>
|
||||
<span class="number">{{item.userDeviceNo}}</span>
|
||||
</view>
|
||||
<view class="bot_item" v-if="item.alertTime">
|
||||
<span class="nrbt" v-if="item.deviceStatus == 1">报警时间:</span>
|
||||
<span class="nrbt" v-if="item.deviceStatus == 0">解除时间:</span>
|
||||
{{item.alertTime}}
|
||||
</view>
|
||||
<view class="bot_item" v-if="item.reveiveTime">
|
||||
<span class="nrbt">上报时间:</span>
|
||||
{{item.reveiveTime}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="load">
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="zwsj" v-else>
|
||||
<!-- <view class="zwsj" v-else>
|
||||
<view class="inzwsj">
|
||||
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
|
||||
<view class="zwsjtext">
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</block>
|
||||
<!-- 监测站告警 -->
|
||||
<block v-else-if="isActive == 0">
|
||||
<view class="liebiaos" v-if="List.length != 0">
|
||||
<scroll-view :style="{height:scorllheights + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
|
||||
|
|
@ -171,7 +136,12 @@
|
|||
dictLabel:'异常趋势图'
|
||||
}
|
||||
],
|
||||
value:0,
|
||||
rangeList: [],
|
||||
isActive:0,
|
||||
rangetime: [Date.now(), Date.now()],
|
||||
deployId:'',
|
||||
resolt:[],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -181,7 +151,6 @@
|
|||
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
|
||||
var navigationHeight = 44 * pxToRpxScale
|
||||
this.height = res.windowHeight * pxToRpxScale//将px 转换rpx
|
||||
console.log(this.height,ktxStatusHeight,navigationHeight)
|
||||
this.scorllheight = this.height - 174
|
||||
this.scorllheights = this.height - 90
|
||||
}
|
||||
|
|
@ -195,12 +164,19 @@
|
|||
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
|
||||
var navigationHeight = 44 * pxToRpxScale
|
||||
this.height = res.windowHeight * pxToRpxScale//将px 转换rpx
|
||||
console.log(this.height,ktxStatusHeight,navigationHeight)
|
||||
this.scorllheight = this.height - 174
|
||||
this.scorllheights = this.height - 90
|
||||
}
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
rangetime(newval) {
|
||||
console.log('范围选:', this.rangetime);
|
||||
this.startTime = this.rangetime[0]
|
||||
this.endTime = this.rangetime[1]
|
||||
this.qushiList()
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
// 下拉刷新被触发
|
||||
refresherrefreshFun() {
|
||||
|
|
@ -218,6 +194,9 @@
|
|||
this.pageNo = 1
|
||||
this.deviceNo = ''
|
||||
this.getList()
|
||||
if(index==1){
|
||||
this.sbeiList()
|
||||
}
|
||||
},
|
||||
getList(){
|
||||
var params = {}
|
||||
|
|
@ -238,36 +217,21 @@
|
|||
this.$http.get(url,{params:params}).then(res =>{
|
||||
if(res.data.code == 0){
|
||||
var data = res.data.data.records
|
||||
// for(var i=0;i<data.length;i++){
|
||||
// if(data[i].alertContent){
|
||||
// for(var j=0;j<data[i].alertContent.length;j++){
|
||||
// data[i].alertContent[j] = JSON.parse(data[i].alertContent[j])
|
||||
// console.log(data[i].alertContent[j])
|
||||
// }
|
||||
// console.log(data[i].alertContent)
|
||||
// }
|
||||
// }
|
||||
this.List = this.List.concat(data)
|
||||
if(res.data.data.total != 0){
|
||||
this.allNum = Number(res.data.data.total)/Number(this.pageSize)+'';
|
||||
console.log(this.allNum,'总页数')
|
||||
if(this.allNum.indexOf('.') == -1) {
|
||||
this.allNum = this.allNum;
|
||||
console.log(this.allNum,'if')
|
||||
} else {
|
||||
this.allNum = parseInt(Number(this.allNum)+1);
|
||||
console.log(this.allNum,'else')
|
||||
}
|
||||
console.log(this.pageNo,this.allNum,'156156')
|
||||
if(this.pageNo == this.allNum) {
|
||||
this.isLastpage = true;
|
||||
this.loadStatus='nomore'
|
||||
console.log(this.isLastpage,'true','nomore')
|
||||
} else {
|
||||
this.isLastpage = false;
|
||||
// this.isLoadMore=true
|
||||
this.loadStatus = 'more'
|
||||
console.log(this.isLastpage,'false')
|
||||
}
|
||||
}else{
|
||||
this.isLastpage = true;
|
||||
|
|
@ -279,7 +243,6 @@
|
|||
})
|
||||
},
|
||||
lower() {
|
||||
console.log("最后一页了，取消下拉功能");
|
||||
// 最后一页了，取消下拉功能
|
||||
if (this.isLastpage) {
|
||||
return
|
||||
|
|
@ -289,7 +252,6 @@
|
|||
this.intervalId = setInterval(() => {
|
||||
num = num+1;
|
||||
},1000)
|
||||
console.log(this.intervalId,num)
|
||||
this.pageNo = this.pageNo + 1;
|
||||
var params = {}
|
||||
params.pageNo = this.pageNo
|
||||
|
|
@ -305,26 +267,15 @@
|
|||
this.$http.get(url,{params:params}).then(res =>{
|
||||
if(res.data.code == 0){
|
||||
var data = res.data.data.records
|
||||
// for(var i=0;i<data.length;i++){
|
||||
// if(data[i].alertContent){
|
||||
// for(var j=0;j<data[i].alertContent.length;j++){
|
||||
// data[i].alertContent[j] = JSON.parse(data[i].alertContent[j])
|
||||
// console.log(data[i].alertContent[j])
|
||||
// }
|
||||
// console.log(data[i].alertContent)
|
||||
// }
|
||||
// }
|
||||
this.List = this.List.concat(data)
|
||||
if(res.data.data.total != 0){
|
||||
if(this.pageNo == this.allNum) {
|
||||
this.isLastpage = true;
|
||||
this.loadStatus='nomore'
|
||||
console.log(this.isLastpage,'true')
|
||||
} else {
|
||||
this.isLastpage = false;
|
||||
// this.isLoadMore=true
|
||||
this.loadStatus = 'more'
|
||||
console.log(this.isLastpage,'false')
|
||||
}
|
||||
}else{
|
||||
this.isLastpage = true;
|
||||
|
|
@ -334,10 +285,58 @@
|
|||
})
|
||||
},
|
||||
changenr(){
|
||||
console.log(this.deviceNo)
|
||||
this.pageNo = 1
|
||||
this.getList()
|
||||
},
|
||||
// 趋势图接口
|
||||
qushiList(){
|
||||
const data = {
|
||||
deployId:this.deployId,
|
||||
startTime:this.startTime,
|
||||
endTime:this.endTime,
|
||||
}
|
||||
this.$http.post('/applet/survAlertRecord/alertSummary',data).then(res => {
|
||||
console.log("趋势数据",res.data.data)
|
||||
let ovelit = res.data.data
|
||||
this.resolt = ovelit.itemList.map(item=>{
|
||||
return {
|
||||
...item,
|
||||
data:ovelit.dataMap[item.entity] || []
|
||||
}
|
||||
})
|
||||
console.log("666666666666",this.resolt)
|
||||
})
|
||||
},
|
||||
sbeiList(){
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=').then(res =>{
|
||||
let sbList = []
|
||||
this.rangeList = res.data.data.map((lit,index)=>{
|
||||
return{
|
||||
"value":index,
|
||||
"text":lit.deployDes,
|
||||
"id":lit.id,
|
||||
}
|
||||
})
|
||||
this.deployId = this.rangeList[this.value].id
|
||||
this.qushiList()
|
||||
uni.hideLoading();
|
||||
})
|
||||
},
|
||||
// 选择deployid
|
||||
change(e) {
|
||||
console.log("单选值", this.rangeList[this.value].id)
|
||||
this.deployId = this.rangeList[this.value].id
|
||||
// this.sbeiList()
|
||||
},
|
||||
// 选择日期范围
|
||||
maskClick(e){
|
||||
console.log('maskClick事件:', e);
|
||||
this.startTime = e[0]
|
||||
this.endTime = e[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -345,37 +344,18 @@
|
|||
<style lang="scss">
|
||||
page{
|
||||
height: 100%;
|
||||
// background-color: #fff;
|
||||
}
|
||||
.container{
|
||||
height: 100%;
|
||||
}
|
||||
.topcheck{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #ededed;
|
||||
background-color: white;
|
||||
}
|
||||
.left{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.right{
|
||||
width: 50%;
|
||||
border-left: 4rpx solid #ededed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.searchbox{
|
||||
height: 88rpx;
|
||||
height: 148rpx;
|
||||
padding: 15rpx 30rpx;
|
||||
// padding: 30rpx;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.search_input{
|
||||
border: none;
|
||||
|
|
@ -391,7 +371,6 @@
|
|||
height: 32rpx;
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
// top: 24%;
|
||||
top:35%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
|
@ -410,15 +389,6 @@
|
|||
.itembox:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.uni-input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.uni-input image{
|
||||
height: 12rpx;
|
||||
width: 24rpx;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
.itembox_top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -437,32 +407,8 @@
|
|||
font-weight: 500;
|
||||
width: 63%;
|
||||
}
|
||||
.caozuo{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex:1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.caozuo image{
|
||||
width: 7rpx;
|
||||
height: 29rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
.bot_item{
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
}
|
||||
.nrbt{
|
||||
color: #898989;
|
||||
margin-right: 10rpx;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
.number{
|
||||
// color: #ff6563;
|
||||
}
|
||||
.numbers{
|
||||
color:#26bf64;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
}
|
||||
.load{
|
||||
height: 100rpx;
|
||||
|
|
@ -470,21 +416,6 @@
|
|||
text-align: center;
|
||||
color: #c6c6c6;
|
||||
}
|
||||
.add{
|
||||
height: 150rpx;
|
||||
width: 150rpx;
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
right: 60rpx;
|
||||
}
|
||||
.popup{
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.title{
|
||||
font-weight: bold;
|
||||
}
|
||||
.zwsj{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -507,35 +438,14 @@
|
|||
line-height: 31rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.bj{
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background-color: #FF4242;
|
||||
}
|
||||
.jcbj{
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background-color: #26bf64;
|
||||
}
|
||||
.topScroll{
|
||||
width: 100%;
|
||||
height: 85rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #ededed;
|
||||
// line-height: 80rpx;
|
||||
// padding:0 32rpx;
|
||||
}
|
||||
.scroll{
|
||||
height: 85rpx;
|
||||
// line-height: 80rpx;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
justify-content: space-between;
|
||||
|
|
@ -547,26 +457,12 @@
|
|||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
// border-bottom: 2rpx solid #ededed;
|
||||
// font-weight: 500;
|
||||
// color: #545C6C;
|
||||
}
|
||||
.scroll-item:first-child{
|
||||
border-right: 4rpx solid #ededed;
|
||||
// border-bottom: 2rpx solid #ededed;
|
||||
// border-right: 2rpx solid #ededed;
|
||||
}
|
||||
.scroll-item2{
|
||||
font-size: 30rpx;
|
||||
font-family: Source Han Sans SC;
|
||||
// font-weight: bold;
|
||||
color: #0F6EFF;
|
||||
}
|
||||
.initem{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// border-bottom: 2rpx solid #ededed;
|
||||
}
|
||||
.zliebs{
|
||||
width: 100rpx;
|
||||
height: 4rpx;
|
||||
|
|
@ -575,7 +471,6 @@
|
|||
border-radius: 20rpx;
|
||||
}
|
||||
.lists_item {
|
||||
// padding-top: 35rpx;
|
||||
padding: 0rpx 0rpx 16rpx 0rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
|
@ -589,7 +484,6 @@
|
|||
font-family: Source Han Sans SC;
|
||||
font-weight: 400;
|
||||
color: #667482;
|
||||
// text-align: center
|
||||
}
|
||||
|
||||
.zbz {
|
||||
|
|
@ -597,24 +491,6 @@
|
|||
font-size: 24rpx;
|
||||
font-family: DIN Next LT Pro;
|
||||
font-weight: 400;
|
||||
// color: #2FCD81;
|
||||
// text-align: center
|
||||
}
|
||||
|
||||
.zbzs {
|
||||
color: #2FCD81;
|
||||
}
|
||||
|
||||
.szqs {
|
||||
width: 53rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.szqs image {
|
||||
width: 24rpx;
|
||||
height: 31rpx;
|
||||
}
|
||||
|
||||
.sbsj {
|
||||
|
|
@ -625,8 +501,6 @@
|
|||
width: 23%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// text-align: center
|
||||
// text-align: right;
|
||||
}
|
||||
.zximg{
|
||||
width: 30rpx;
|
||||
|
|
@ -659,37 +533,15 @@
|
|||
|
||||
.tabitem:first-child{
|
||||
width: 31%;
|
||||
// text-align: center
|
||||
}
|
||||
.tabitem:nth-child(2){
|
||||
width: 27%;
|
||||
// text-align: center
|
||||
}
|
||||
.tabitem:nth-child(3){
|
||||
width: 23%;
|
||||
// text-align: center
|
||||
}
|
||||
.tabitem:nth-child(4){
|
||||
flex:1
|
||||
// text-align: center
|
||||
}
|
||||
.topcheck{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #ededed;
|
||||
background-color: white;
|
||||
}
|
||||
.left{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.right{
|
||||
width: 50%;
|
||||
border-left: 4rpx solid #ededed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.itembox_right{
|
||||
font-size: 26rpx;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,25 @@
|
|||
## 2.0.12（2025-08-26）
|
||||
- 优化 uni-app x 下 size 类型问题
|
||||
## 2.0.11（2025-08-18）
|
||||
- 修复 图标点击事件返回
|
||||
## 2.0.9（2024-01-12）
|
||||
fix: 修复图标大小默认值错误的问题
|
||||
## 2.0.8（2023-12-14）
|
||||
- 修复 项目未使用 ts 情况下，打包报错的bug
|
||||
## 2.0.7（2023-12-14）
|
||||
- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
|
||||
## 2.0.6（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.5（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.4（2023-12-06）
|
||||
- 优化 uni-app x 下示例项目图标排序
|
||||
## 2.0.3（2023-12-06）
|
||||
- 修复 nvue下引入组件报错的bug
|
||||
## 2.0.2（2023-12-05）
|
||||
-优化 size 属性支持单位
|
||||
## 2.0.1（2023-12-05）
|
||||
- 新增 uni-app x 支持定义图标
|
||||
## 1.3.5（2022-01-24）
|
||||
- 优化 size 属性可以传入不带单位的字符串数值
|
||||
## 1.3.4（2022-01-24）
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
|
||||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
|
||||
<slot></slot>
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './icons.js';
|
||||
import { fontData } from './uniicons_file_vue.js';
|
||||
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g
|
||||
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
|
||||
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
|
||||
}
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
var domModule = weex.requireModule('dom');
|
||||
import iconUrl from './uniicons.ttf'
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('"+iconUrl+"')"
|
||||
'src': "url('" + iconUrl + "')"
|
||||
});
|
||||
// #endif
|
||||
|
||||
|
|
@ -34,7 +38,7 @@
|
|||
*/
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
emits:['click'],
|
||||
emits: ['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
|
|
@ -48,31 +52,41 @@
|
|||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix:{
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: icons.glyphs
|
||||
icons: fontData
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
unicode(){
|
||||
let code = this.icons.find(v=>v.font_class === this.type)
|
||||
if(code){
|
||||
return unescape(`%u${code.unicode}`)
|
||||
computed: {
|
||||
unicode() {
|
||||
let code = this.icons.find(v => v.font_class === this.type)
|
||||
if (code) {
|
||||
return code.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize(){
|
||||
iconSize() {
|
||||
return getVal(this.size)
|
||||
},
|
||||
styleObj() {
|
||||
if (this.fontFamily !== '') {
|
||||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
|
||||
}
|
||||
return `color: ${this.color}; font-size: ${this.iconSize};`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit('click')
|
||||
_onClick(e) {
|
||||
this.$emit('click', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,9 +95,10 @@
|
|||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
@import './uniicons.css';
|
||||
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url('./uniicons.ttf') format('truetype');
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
|
@ -92,5 +107,4 @@
|
|||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-color:before {
|
||||
content: "\e6cf";
|
||||
}
|
||||
|
|
@ -58,10 +67,6 @@
|
|||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-fire-filled:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
|
@ -82,6 +87,18 @@
|
|||
content: "\e698";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6d3";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6d4";
|
||||
}
|
||||
|
||||
.uniui-back:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
|
|
@ -94,55 +111,43 @@
|
|||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrow-left:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrow-up:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrow-down:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6be";
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.uniui-down:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-bottom:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-arrowdown:before {
|
||||
content: "\e6b8";
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6d5";
|
||||
}
|
||||
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-top:before {
|
||||
.uniui-up:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-arrowup:before {
|
||||
.uniui-top:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
|
|
@ -150,8 +155,8 @@
|
|||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.uniui-arrowleft:before {
|
||||
content: "\e6b7";
|
||||
.uniui-arrowup:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
|
||||
.uniui-eye:before {
|
||||
|
|
@ -638,10 +643,6 @@
|
|||
content: "\e627";
|
||||
}
|
||||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.uniui-checkbox:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "1.3.5",
|
||||
"version": "2.0.12",
|
||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
|
|
@ -11,16 +11,14 @@
|
|||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.2.14"
|
||||
"HBuilderX": "^3.2.14",
|
||||
"uni-app": "^4.08",
|
||||
"uni-app-x": "^4.61"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
|
|
@ -37,48 +35,75 @@
|
|||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue",
|
||||
"darkmode": "x",
|
||||
"i18n": "x",
|
||||
"widescreen": "x"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"dependencies": [
|
||||
"uni-scss"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
"tcb": "x",
|
||||
"aliyun": "x",
|
||||
"alipay": "x"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": "√",
|
||||
"vue3": "√"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
"app": {
|
||||
"vue": "√",
|
||||
"nvue": "-",
|
||||
"android": {
|
||||
"extVersion": "",
|
||||
"minVersion": "29"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
"mp": {
|
||||
"weixin": "√",
|
||||
"alipay": "√",
|
||||
"toutiao": "√",
|
||||
"baidu": "√",
|
||||
"kuaishou": "-",
|
||||
"jd": "-",
|
||||
"harmony": "-",
|
||||
"qq": "√",
|
||||
"lark": "-"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
"quickapp": {
|
||||
"huawei": "√",
|
||||
"union": "√"
|
||||
}
|
||||
},
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"android": {
|
||||
"extVersion": "",
|
||||
"minVersion": "29"
|
||||
},
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue