|
@@ -1,48 +1,111 @@
|
|
<template>
|
|
<template>
|
|
<view>
|
|
<view>
|
|
- <scroll-view scroll-x>
|
|
|
|
- <view class="tab">
|
|
|
|
- <view class="item" @click="change_active(index,item)" v-for="(item,index) in fiveFixedCategory"
|
|
|
|
- :key="index">
|
|
|
|
- <view class="text" :class="active == index?'active':''">{{item}}</view>
|
|
|
|
|
|
+ <!-- 标题 -->
|
|
|
|
+ <view class="title" @click="open_menu()">
|
|
|
|
+ <view class="left">
|
|
|
|
+ <view class="icon">
|
|
|
|
+ <image src="./icon/menu.png" mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text">{{title}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="right">
|
|
|
|
+ <view class="icon">
|
|
|
|
+ <image src="./icon/right_icon.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
</view>
|
|
</view>
|
|
- </scroll-view>
|
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
+ <view class="menu" v-show="menu">
|
|
|
|
+ <view class="menu_item">
|
|
|
|
+ <view class="left">
|
|
|
|
+ <view class="item" v-for="(item,index) in menu_1" :key="index" @click="change_active_1(index)"
|
|
|
|
+ :class="active_1 == index ? 'active' : ''">{{item}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="right">
|
|
|
|
+ <view class="item" v-for="(item,index) in menu_2" :key="index" @click="change_active_2(index)">
|
|
|
|
+ <view class="icon" v-if="active_2 == index">
|
|
|
|
+ <image src="./icon/active.png" mode=""></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text" :style="{color: active_2 == index ? '#000' : ''}">{{item.title}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
|
|
<view class="list">
|
|
<view class="list">
|
|
- <view class="item" v-for="(item,index) in list" :key="index" v-if="item.data.length > 0">
|
|
|
|
- <view class="title">
|
|
|
|
- <view class="text">{{item.title}}</view>
|
|
|
|
- <view class="tip" v-if="item.count > 0">{{item.count}}</view>
|
|
|
|
|
|
+ <view class="tubiao" v-if="title != '全部'">
|
|
|
|
+ <view class="tubiao_title">
|
|
|
|
+ <view class="text">{{tubiao_title}}</view>
|
|
</view>
|
|
</view>
|
|
- <view class="inner" v-for="(item_2,index_2) in item.data">
|
|
|
|
|
|
+ <view class="tubiao_box">
|
|
|
|
+ <view class="charts-box">
|
|
|
|
+ <qiun-data-charts type="pie" :opts="pie_1" :chartData="chartData"
|
|
|
|
+ @getIndex="legend_click($event)" tooltipFormat="column_1" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="tubiao_line">
|
|
|
|
+ <view class="line">
|
|
|
|
+ <view class="lable">起始时间</view>
|
|
|
|
+ <picker mode="date" :value="date_start" @change="bindDateChange_start">
|
|
|
|
+ <view class="text">
|
|
|
|
+ <view>{{date_start}}</view>
|
|
|
|
+ <view>
|
|
|
|
+ <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </picker>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="line">
|
|
|
|
+ <view class="lable">结束时间</view>
|
|
|
|
+ <picker mode="date" :value="date_end" @change="bindDateChange_end">
|
|
|
|
+ <view class="text">
|
|
|
|
+ <view>{{date_end}}</view>
|
|
|
|
+ <view>
|
|
|
|
+ <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </picker>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="line">
|
|
|
|
+ <view class="lable">统计项</view>
|
|
|
|
+ <view class="text" @click="change_census_type()">
|
|
|
|
+ <view>
|
|
|
|
+ {{tubiao_census_type}}
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item" v-for="(item,index) in data" :key="index" @click="go_detail(item.num,item.id)">
|
|
|
|
+ <view class="inner">
|
|
<view class="left">
|
|
<view class="left">
|
|
- <view class="user">
|
|
|
|
- <image :src="item_2.face" mode="aspectFill"></image>
|
|
|
|
|
|
+ <view class="user"
|
|
|
|
+ v-if="item.face != 'http://localhost/storage/avatar/avatar_15042504.png' && item.face != 'upload/face/1.jpg'">
|
|
|
|
+ <image :src="item.face" mode="aspectFill"></image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="user"
|
|
|
|
+ v-if="item.face == 'http://localhost/storage/avatar/avatar_15042504.png' || item.face == 'upload/face/1.jpg'">
|
|
|
|
+ <view class="avatar">{{item.optname.split('')[0]}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="right">
|
|
- <view class="name">{{item_2.optname}}<text>{{item_2.depart}}</text></view>
|
|
|
|
|
|
+ <view class="name">{{item.optname}}<text>{{item.depart}}</text></view>
|
|
<view class="text">
|
|
<view class="text">
|
|
- <view v-html="item_2.str"></view>
|
|
|
|
|
|
+ <view v-html="item.str"></view>
|
|
</view>
|
|
</view>
|
|
<view class="img_box">
|
|
<view class="img_box">
|
|
- <view class="img" v-for="(item_3,index_3) in item_2.picture" :key="index_3">
|
|
|
|
- <view class="" v-for="(item_4,index_4) in item_3" :key="index_4">
|
|
|
|
- <image :src="item_4" mode="aspectFill" @click.stop="img_chakan(item_4)"></image>
|
|
|
|
|
|
+ <view v-for="(item_2,index_2) in item.picture" :key="index_2">
|
|
|
|
+ <view class="img" v-for="(item_3,index_3) in item_2" :key="index_3">
|
|
|
|
+ <image :src="item_3" mode="aspectFill" @click.stop="img_chakan(item_3)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="time">{{item_2.optdt}}</view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="btn">
|
|
|
|
- <view class="icon">
|
|
|
|
- <image src="./icon/btn.png" mode=""></image>
|
|
|
|
|
|
+ <view class="time">{{item.optdt}}</view>
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
- <view class="btn_text" @click="go_all_list(item.table,item.title,item.num)">点击查看全部信息</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -50,32 +113,119 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import {
|
|
|
|
+ getNextDate
|
|
|
|
+ } from "@/common/time.js"
|
|
export default {
|
|
export default {
|
|
name: "t-o-news-tab-2",
|
|
name: "t-o-news-tab-2",
|
|
data() {
|
|
data() {
|
|
|
|
+ const currentDate_end = this.getDate({
|
|
|
|
+ format: true
|
|
|
|
+ })
|
|
return {
|
|
return {
|
|
- active: 0,
|
|
|
|
- // 五定表分类
|
|
|
|
- fiveFixedCategory: [],
|
|
|
|
|
|
+ title: "全部",
|
|
|
|
+ menu: false,
|
|
|
|
+ menu_1: [],
|
|
|
|
+ menu_2: [],
|
|
|
|
+
|
|
|
|
+ active_1: 0,
|
|
|
|
+ active_2: 0,
|
|
|
|
+
|
|
|
|
+ // list
|
|
|
|
+ table: "",
|
|
|
|
+
|
|
|
|
+ page: 1,
|
|
|
|
+ pageSize: 20,
|
|
|
|
+
|
|
|
|
+ name: [],
|
|
|
|
+ data: [],
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // 图表数据
|
|
|
|
+ tubiao_title: "",
|
|
|
|
+
|
|
|
|
+ // 图表数据
|
|
|
|
+ chartData: {
|
|
|
|
+ "series": [{
|
|
|
|
+ "data": []
|
|
|
|
+ }]
|
|
|
|
+ },
|
|
|
|
+ pie_1: {
|
|
|
|
+ "dataLabel": false,
|
|
|
|
+ "legend": {
|
|
|
|
+ // "show":false,
|
|
|
|
+ "position": "bottom",
|
|
|
|
+ "float": "center",
|
|
|
|
+ "lineHeight": 20,
|
|
|
|
+ },
|
|
|
|
+ "title": {
|
|
|
|
+ "name": " "
|
|
|
|
+ },
|
|
|
|
+ "subtitle": {
|
|
|
|
+ "name": " "
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 起始时间
|
|
|
|
+ date_start: "",
|
|
|
|
+ // 结束时间
|
|
|
|
+ date_end: currentDate_end,
|
|
|
|
+ // 图标统计项
|
|
|
|
+ tubiao_census_type: "",
|
|
|
|
+ tubiao_census_type_fields: "",
|
|
|
|
+
|
|
|
|
+ // 统计项配置参数
|
|
|
|
+ TableFiledRemark: [],
|
|
|
|
+
|
|
|
|
+ TableFiledRemark_name: []
|
|
|
|
|
|
- list: []
|
|
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.get_five_fixed_fiveFixedCategory()
|
|
this.get_five_fixed_fiveFixedCategory()
|
|
|
|
+ this.get_five_fixed_getRecordDataByTableName()
|
|
|
|
+
|
|
|
|
+ this.date_start = getNextDate(this.date_end, -30)
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- change_active(index, item) {
|
|
|
|
- this.active = index
|
|
|
|
-
|
|
|
|
- this.get_five_fixed_getRecordDataByCategoryName(item)
|
|
|
|
|
|
+ // 翻页
|
|
|
|
+ nextPage() {
|
|
|
|
+ this.page++
|
|
|
|
+ this.get_five_fixed_getRecordDataByTableName()
|
|
|
|
+ },
|
|
|
|
+ open_menu() {
|
|
|
|
+ this.menu = !this.menu
|
|
|
|
+ },
|
|
|
|
+ change_active_1(index) {
|
|
|
|
+ this.active_1 = index
|
|
|
|
+ this.active_2 = 0
|
|
|
|
+
|
|
|
|
+ this.title = this.menu_1[index]
|
|
|
|
+ this.get_five_fixed_getRecordDataByCategoryName(this.menu_1[index])
|
|
|
|
+ },
|
|
|
|
+ change_active_2(index) {
|
|
|
|
+ this.active_2 = index
|
|
|
|
+ this.title = this.menu_2[index].title
|
|
|
|
+ this.tubiao_title = this.menu_2[index].title
|
|
|
|
+
|
|
|
|
+ // 当前详情参数
|
|
|
|
+ this.table = this.menu_2[index].table
|
|
|
|
+ // 获取图表数据
|
|
|
|
+ this.date_end = this.getDate()
|
|
|
|
+ this.date_start = getNextDate(this.date_end, -30)
|
|
|
|
+ this.get_five_fixed_getTableFiledRemark()
|
|
|
|
+ // 获取列表
|
|
|
|
+ this.page = 1
|
|
|
|
+ this.data = []
|
|
|
|
+ this.get_five_fixed_getRecordDataByTableName()
|
|
|
|
+ this.open_menu()
|
|
},
|
|
},
|
|
// 记录管理分类
|
|
// 记录管理分类
|
|
get_five_fixed_fiveFixedCategory() {
|
|
get_five_fixed_fiveFixedCategory() {
|
|
this.$api.five_fixed_fiveFixedCategory({
|
|
this.$api.five_fixed_fiveFixedCategory({
|
|
|
|
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
- this.fiveFixedCategory = res.data.content.data
|
|
|
|
|
|
+ this.menu_1 = res.data.content.data
|
|
|
|
|
|
this.get_five_fixed_getRecordDataByCategoryName(res.data.content.data[0])
|
|
this.get_five_fixed_getRecordDataByCategoryName(res.data.content.data[0])
|
|
})
|
|
})
|
|
@@ -89,117 +239,240 @@
|
|
category_name: category_name
|
|
category_name: category_name
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
uni.hideLoading()
|
|
uni.hideLoading()
|
|
-
|
|
|
|
- // console.log(res.data.content.data)
|
|
|
|
-
|
|
|
|
- this.list = res.data.content.data
|
|
|
|
|
|
+
|
|
|
|
+ this.menu_2 = res.data.content.data
|
|
})
|
|
})
|
|
},
|
|
},
|
|
-
|
|
|
|
- go_all_list(table,title,num) {
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: "../../origanization/news/tab_2/all_list/all_list?table=" + table + "&title=" + title + "&num=" + num
|
|
|
|
|
|
+ // 获取该分类下的列表详情
|
|
|
|
+ get_five_fixed_getRecordDataByTableName() {
|
|
|
|
+ console.log(this.table)
|
|
|
|
+ this.$api.five_fixed_getRecordDataByTableName({
|
|
|
|
+ table_name: this.table,
|
|
|
|
+ page: this.page,
|
|
|
|
+ pageSize: this.pageSize
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ this.data = this.data.concat(res.data.content.data.table_data.data)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
-
|
|
|
|
img_chakan(url) {
|
|
img_chakan(url) {
|
|
-
|
|
|
|
let data = []
|
|
let data = []
|
|
data[0] = url
|
|
data[0] = url
|
|
uni.previewImage({
|
|
uni.previewImage({
|
|
urls: data
|
|
urls: data
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ go_detail(num, id) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: "../../origanization/news/tab_2/all_list/detail/detail?table=" + num + "&id=" + id
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ bindDateChange_start: function(e) {
|
|
|
|
+ this.date_start = e.target.value
|
|
|
|
+ this.get_five_fixed_getTableFiledTotalNumber()
|
|
|
|
+ },
|
|
|
|
+ bindDateChange_end: function(e) {
|
|
|
|
+ this.date_end = e.target.value
|
|
|
|
+ this.get_five_fixed_getTableFiledTotalNumber()
|
|
|
|
+ },
|
|
|
|
+ getDate(type) {
|
|
|
|
+ const date = new Date();
|
|
|
|
+ let year = date.getFullYear();
|
|
|
|
+ let month = date.getMonth() + 1;
|
|
|
|
+ let day = date.getDate();
|
|
|
|
+
|
|
|
|
+ if (type === 'start') {
|
|
|
|
+ year = year - 60;
|
|
|
|
+ } else if (type === 'end') {
|
|
|
|
+ year = year + 2;
|
|
|
|
+ }
|
|
|
|
+ month = month > 9 ? month : '0' + month;
|
|
|
|
+ day = day > 9 ? day : '0' + day;
|
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 获取统计项参数配置
|
|
|
|
+ get_five_fixed_getTableFiledRemark() {
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ mask: true
|
|
|
|
+ })
|
|
|
|
+ this.TableFiledRemark_name = []
|
|
|
|
+ this.$api.five_fixed_getTableFiledRemark({
|
|
|
|
+ table_name: this.table
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ this.TableFiledRemark = res.data.content.data
|
|
|
|
+
|
|
|
|
+ let data = res.data.content.data
|
|
|
|
+
|
|
|
|
+ data.forEach((item, index) => {
|
|
|
|
+ this.TableFiledRemark_name.push(item.name)
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ this.tubiao_census_type = this.TableFiledRemark[0].name
|
|
|
|
+
|
|
|
|
+ this.tubiao_census_type_fields = this.TableFiledRemark[0].fields
|
|
|
|
+
|
|
|
|
+ this.get_five_fixed_getTableFiledTotalNumber()
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 改变统计项
|
|
|
|
+ change_census_type() {
|
|
|
|
+ uni.showActionSheet({
|
|
|
|
+ itemList: this.TableFiledRemark_name,
|
|
|
|
+ success: (res) => {
|
|
|
|
+ this.tubiao_census_type = this.TableFiledRemark[res.tapIndex].name
|
|
|
|
+ this.tubiao_census_type_fields = this.TableFiledRemark[res.tapIndex].fields
|
|
|
|
+ this.get_five_fixed_getTableFiledTotalNumber()
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 获取图表数据
|
|
|
|
+ get_five_fixed_getTableFiledTotalNumber() {
|
|
|
|
+ this.$api.five_fixed_getTableFiledTotalNumber({
|
|
|
|
+ table_name: this.table,
|
|
|
|
+ field_name: this.tubiao_census_type_fields,
|
|
|
|
+ start_date: this.date_start,
|
|
|
|
+ end_date: this.date_end
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ this.chartData.series[0].data = res.data.content.data
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ legend_click($event) {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: "../../origanization/news/tab_2/all_list/all_list?title=" + this.title + "&table=" + this
|
|
|
|
+ .table + "&tubiao_census_type_fields=" + this.tubiao_census_type_fields +
|
|
|
|
+ "&tubiao_census_type_fields_value=" + this.chartData.series[0].data[$event.currentIndex]
|
|
|
|
+ .name.split('(')[0] + "&date_start=" + this.date_start + "&date_end=" + this.date_end
|
|
|
|
+ })
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
- .tab {
|
|
|
|
- display: flex;
|
|
|
|
-
|
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
- background-color: #FFFFFF;
|
|
|
|
-
|
|
|
|
|
|
+ .title {
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- padding: 0 20rpx;
|
|
|
|
-
|
|
|
|
- .item {
|
|
|
|
- background-color: #FFFFFF;
|
|
|
|
|
|
+ padding: 0 25rpx;
|
|
|
|
+ height: 90rpx;
|
|
|
|
|
|
- .text {
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
- height: 90rpx;
|
|
|
|
- line-height: 90rpx;
|
|
|
|
|
|
+ .left {
|
|
|
|
+ display: flex;
|
|
|
|
|
|
- width: 188rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- overflow: hidden;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
|
+ .icon {
|
|
|
|
+ image {
|
|
|
|
+ width: 30rpx;
|
|
|
|
+ height: 30rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ .text {
|
|
|
|
+ margin-left: 18rpx;
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
- color: #666666;
|
|
|
|
|
|
+ color: #009fe8;
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
|
- font-weight: 700;
|
|
|
|
- color: #000000;
|
|
|
|
- border-bottom: 4rpx solid #009FE8;
|
|
|
|
- }
|
|
|
|
|
|
+ .right {
|
|
|
|
+ text-align: right;
|
|
|
|
+ width: 50rpx;
|
|
|
|
|
|
|
|
+ .icon {
|
|
|
|
+ image {
|
|
|
|
+ width: 18rpx;
|
|
|
|
+ height: 18rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .list {
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding: 0 25rpx;
|
|
|
|
|
|
+ .menu {
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
|
- .item {
|
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
- width: 700rpx;
|
|
|
|
- background-color: #FFFFFF;
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
-
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding: 0 25rpx;
|
|
|
|
-
|
|
|
|
- padding-bottom: 20rpx;
|
|
|
|
-
|
|
|
|
- .title {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
|
|
+ margin: 0 25rpx;
|
|
|
|
+ width: 700rpx;
|
|
|
|
|
|
- .text {
|
|
|
|
|
|
+ margin-bottom: 40rpx;
|
|
|
|
+
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .menu_item {
|
|
|
|
+ display: flex;
|
|
|
|
+
|
|
|
|
+ .left {
|
|
|
|
+ .item {
|
|
|
|
+ width: 260rpx;
|
|
text-align: center;
|
|
text-align: center;
|
|
- height: 120rpx;
|
|
|
|
line-height: 120rpx;
|
|
line-height: 120rpx;
|
|
- font-size: 40rpx;
|
|
|
|
- font-weight: 700;
|
|
|
|
-
|
|
|
|
- overflow: hidden;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
|
+ color: #8C8C8C;
|
|
|
|
+ box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
|
|
- .tip {
|
|
|
|
- margin-left: 10rpx;
|
|
|
|
- width: 64rpx;
|
|
|
|
- height: 30rpx;
|
|
|
|
- color: red;
|
|
|
|
- text-align: right;
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
|
+ .active {
|
|
|
|
+ background-color: #F8FDFF;
|
|
|
|
+ color: #00A0E8;
|
|
|
|
+ border-left: 4rpx solid #00A0E8;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .right {
|
|
|
|
+ width: 420rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border-left: 4rpx solid #EEEEEE;
|
|
|
|
+
|
|
|
|
+ .item {
|
|
|
|
+ position: relative;
|
|
|
|
+ line-height: 120rpx;
|
|
|
|
+
|
|
|
|
+ display: flex;
|
|
|
|
+
|
|
|
|
+ .icon {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+
|
|
|
|
+ image {
|
|
|
|
+ width: 14rpx;
|
|
|
|
+ height: 26rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .text {
|
|
|
|
+ margin-left: 48rpx;
|
|
|
|
+ color: #8C8C8C;
|
|
|
|
|
|
- background-image: url(./icon/new.png);
|
|
|
|
- background-size: 43rpx 30rpx;
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .list {
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 25rpx;
|
|
|
|
+
|
|
|
|
+ .item {
|
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
+ margin-bottom: 40rpx;
|
|
|
|
|
|
.inner {
|
|
.inner {
|
|
- width: 650rpx;
|
|
|
|
|
|
+ margin-bottom: 40rpx;
|
|
|
|
+ width: 700rpx;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
|
.left {
|
|
.left {
|
|
@@ -210,13 +483,25 @@
|
|
|
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .avatar {
|
|
|
|
+ width: 90rpx;
|
|
|
|
+ height: 90rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 90rpx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background-color: #7EB1A0;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.right {
|
|
.right {
|
|
margin-left: 20rpx;
|
|
margin-left: 20rpx;
|
|
|
|
|
|
- width: 600rpx;
|
|
|
|
|
|
+ width: 650rpx;
|
|
|
|
|
|
.name {
|
|
.name {
|
|
margin-top: 5rpx;
|
|
margin-top: 5rpx;
|
|
@@ -224,15 +509,15 @@
|
|
|
|
|
|
text {
|
|
text {
|
|
margin-left: 20rpx;
|
|
margin-left: 20rpx;
|
|
- font-size: 26rpx;
|
|
|
|
|
|
+ font-size: 28rpx;
|
|
color: #3a3a3a;
|
|
color: #3a3a3a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.text {
|
|
.text {
|
|
- width: 550rpx;
|
|
|
|
|
|
+ width: 600rpx;
|
|
margin-top: 10rpx;
|
|
margin-top: 10rpx;
|
|
- font-size: 28rpx;
|
|
|
|
|
|
+ font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.img_box {
|
|
.img_box {
|
|
@@ -260,40 +545,80 @@
|
|
}
|
|
}
|
|
|
|
|
|
.time {
|
|
.time {
|
|
- margin-top: 20rpx;
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
|
+ font-size: 26rpx;
|
|
color: #999999;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- .btn {
|
|
|
|
- margin: 20rpx auto;
|
|
|
|
- width: 400rpx;
|
|
|
|
- height: 50rpx;
|
|
|
|
-
|
|
|
|
- background-color: #69BBFA;
|
|
|
|
- border-radius: 50rpx;
|
|
|
|
-
|
|
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tubiao {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 700rpx;
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ // height: 900rpx;
|
|
|
|
+
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 25rpx;
|
|
|
|
+
|
|
|
|
+ border-bottom: 2rpx solid #EEEEEE;
|
|
|
|
+ margin-bottom: 40rpx;
|
|
|
|
+
|
|
|
|
+ .tubiao_title {
|
|
|
|
+ text-align: center;
|
|
|
|
+ height: 90rpx;
|
|
|
|
+
|
|
|
|
+ .text {
|
|
|
|
+ font-size: 38rpx;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tubiao_box {
|
|
|
|
+ width: 650rpx;
|
|
|
|
+ height: 640rpx;
|
|
|
|
+
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: top;
|
|
|
|
+
|
|
|
|
+ .charts-box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 640rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tubiao_line {
|
|
|
|
+ padding-top: 20rpx;
|
|
|
|
+ width: 650rpx;
|
|
|
|
+ border-top: 2rpx solid #f7f7f7;
|
|
|
|
+
|
|
|
|
+ .line {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- justify-content: center;
|
|
|
|
-
|
|
|
|
- .icon {
|
|
|
|
- image {
|
|
|
|
- width: 23rpx;
|
|
|
|
- height: 24rpx;
|
|
|
|
-
|
|
|
|
- display: block;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
+
|
|
|
|
+ .lable {
|
|
|
|
+ color: #666666;
|
|
|
|
+ width: 200rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
- .btn_text {
|
|
|
|
- margin-left: 10rpx;
|
|
|
|
- font-size: 28rpx;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
|
|
+
|
|
|
|
+ .text {
|
|
|
|
+ width: 400rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ border: 2rpx solid #E9EBF2;
|
|
|
|
+
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 10rpx 25rpx;
|
|
|
|
+
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|