From 428216f1c3c255b107eb689cb2afac1b7ed3df80 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 14 六月 2023 21:11:33 +0800
Subject: [PATCH] 样式优化
---
src/views/operate/disposal/casepool/pool/index.vue | 22 ++++++-
src/components/detail/index.vue | 52 ++++++++++++-----
src/components/illdetail/index.vue | 9 ++
src/components/process/index.vue | 45 ++++----------
src/components/solveProblem/index.vue | 4
5 files changed, 76 insertions(+), 56 deletions(-)
diff --git a/src/components/detail/index.vue b/src/components/detail/index.vue
index d9a11e0..65dac44 100644
--- a/src/components/detail/index.vue
+++ b/src/components/detail/index.vue
@@ -3,13 +3,15 @@
<div class="view-data">
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 闂绫诲瀷: </label>
+ <label class="data-title"> 闂绫诲瀷锛�</label>
<span class="data-detail">{{
getCategoryLabel(baseCase.category)
}}</span>
</div>
- <div class="data-item__right">
- <label class="data-title"> 澶х被鍚嶇О: </label>
+ </div>
+ <div class="data-item">
+ <div class="data-item__left">
+ <label class="data-title"> 澶х被鍚嶇О锛�</label>
<span class="data-detail">{{
baseCase.violationsVO.categoryText
}}</span>
@@ -17,17 +19,19 @@
</div>
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 灏忕被鍚嶇О: </label>
+ <label class="data-title"> 灏忕被鍚嶇О锛�</label>
<span class="data-detail">{{ baseCase.violationsVO.typeText }}</span>
</div>
- <div class="data-item__right">
- <label class="data-title"> 浜嬩欢绛夌骇: </label>
+ </div>
+ <div class="data-item">
+ <div class="data-item__left">
+ <label class="data-title"> 浜嬩欢绛夌骇锛�</label>
<span class="data-detail">{{ baseCase.violationsVO.gradeText }}</span>
</div>
</div>
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 妗堢敱: </label>
+ <label class="data-title"> 妗堢敱锛�</label>
<span class="data-detail">{{
baseCase.violationsVO.actionCause
}}</span>
@@ -35,29 +39,31 @@
</div>
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 鎵�灞炶閬�: </label>
+ <label class="data-title"> 鎵�灞炶閬擄細</label>
<span class="data-detail">{{ baseCase.streetText }}</span>
</div>
- <div class="data-item__right">
- <label class="data-title"> 鎵�灞炵ぞ鍖�: </label>
+ </div>
+ <div class="data-item">
+ <div class="data-item__left">
+ <label class="data-title"> 鎵�灞炵ぞ鍖猴細</label>
<span class="data-detail">{{ baseCase.communityText }}</span>
</div>
</div>
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 浜嬪彂鍦扮偣: </label>
+ <label class="data-title"> 浜嬪彂鍦扮偣锛�</label>
<span class="data-detail">{{ baseCase.site }}</span>
</div>
</div>
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 鍏宠仈鍟嗛摵鍚嶇О: </label>
+ <label class="data-title"> 鍟嗛摵鍚嶇О锛�</label>
<span class="data-detail">{{ baseCase.violationsVO.shopName }}</span>
</div>
</div>
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 闂鎻忚堪: </label>
+ <label class="data-title"> 闂鎻忚堪锛�</label>
<span class="data-detail">{{
baseCase.violationsVO.description
}}</span>
@@ -66,13 +72,15 @@
<div class="data-user">
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 鍙嶆槧浜�: </label>
+ <label class="data-title"> 鍙嶆槧浜猴細</label>
<span class="data-detail">{{
baseCase.violationsVO.informant
}}</span>
</div>
+ </div>
+ <div class="data-item">
<div class="data-item__right">
- <label class="data-title"> 鑱旂郴鏂瑰紡: </label>
+ <label class="data-title"> 鑱旂郴鏂瑰紡锛�</label>
<span class="data-detail">{{
baseCase.violationsVO.informantPhoneCode
}}</span>
@@ -80,7 +88,7 @@
</div>
<div class="data-item">
<div class="data-item__left">
- <label class="data-title"> 韬唤璇佸彿: </label>
+ <label class="data-title"> 韬唤璇佸彿锛�</label>
<span class="data-detail">{{
baseCase.violationsVO.informantIdCard
}}</span>
@@ -215,10 +223,22 @@
}
border: 1px solid #17324c;
+ .data-title {
+ line-height: 1.8;
+ width: 70px;
+ text-align: right;
+ display: inline-grid;
+ }
.data-detail {
line-height: 1.8;
max-width: 240px;
display: inline-grid;
+ color: #333;
+
+ width: calc(100% - 70px) !important;
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: normal !important;
}
}
diff --git a/src/components/illdetail/index.vue b/src/components/illdetail/index.vue
index 308757c..3b6d6cc 100644
--- a/src/components/illdetail/index.vue
+++ b/src/components/illdetail/index.vue
@@ -11,6 +11,8 @@
<el-form-item label="闂绫诲瀷:">
<span class="data-detail">杩濆缓</span>
</el-form-item>
+ </div>
+ <div class="data-item">
<el-form-item label="杩濆缓绫诲埆:">
<span class="data-detail">{{ baseCase.categoryText }}</span>
</el-form-item>
@@ -40,6 +42,8 @@
<el-form-item label="杩濆缓鍦扮偣:">
<span class="data-detail">{{ baseCase.site }}</span>
</el-form-item>
+ </div>
+ <div class="data-item">
<el-form-item label="鎵�灞炵ぞ鍖�:">
<span class="data-detail">{{ baseCase.communityText }}</span>
</el-form-item>
@@ -187,8 +191,8 @@
handlePassVo: {},
currentSitVo: {},
filesPictureVo: {},
- pic:[],
- media:[]
+ pic: [],
+ media: [],
};
},
created() {
@@ -226,6 +230,7 @@
line-height: 20px;
.data-detail {
+ color: #333;
line-height: 1.8;
max-width: 240px;
display: inline-grid;
diff --git a/src/components/process/index.vue b/src/components/process/index.vue
index a142fd9..376b98c 100644
--- a/src/components/process/index.vue
+++ b/src/components/process/index.vue
@@ -1,36 +1,13 @@
<template>
<div class="my-process">
<div class="my-pro-header">
- <div class="pro-step" v-for="(item, index) in list" :key="item.name">
- <div class="pro-step-top">
- <div
- :class="[
- 'circle',
- active === index
- ? 'in-process__circle'
- : active > index
- ? 'finish'
- : 'wait',
- ]"
- ></div>
- <div
- :class="['line', active > index ? 'finish-line' : '']"
- v-if="index < list.length - 1 ? true : false"
- ></div>
- </div>
- <div
- :class="[
- 'pro-step-name',
- active === index
- ? 'in-process'
- : active > index
- ? 'finish-name'
- : 'wait',
- ]"
- >
- {{ item.name }}
- </div>
- </div>
+ <el-steps :space="260" :active="active" finish-status="success">
+ <el-step
+ v-for="item in list"
+ :title="item.name"
+ :key="item.title"
+ ></el-step>
+ </el-steps>
</div>
<div class="my-pro-main">
<div class="pro-step-ver" v-for="(item, index) in list" :key="item.title">
@@ -122,7 +99,7 @@
} else if (mystate === 9) {
this.active = 4;
} else {
- this.active = -1;
+ this.active = 0;
}
this.list = mylist;
},
@@ -140,7 +117,8 @@
.my-process {
padding-top: 50px;
.my-pro-header {
- display: flex;
+ padding: 0 30px;
+ line-height: 1;
.pro-step {
flex: 1;
@@ -222,5 +200,8 @@
.finish-name {
color: #4b9bb7;
}
+ .desc-content-message {
+ color: #666;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/components/solveProblem/index.vue b/src/components/solveProblem/index.vue
index 715b979..b42a2d4 100644
--- a/src/components/solveProblem/index.vue
+++ b/src/components/solveProblem/index.vue
@@ -5,7 +5,7 @@
<div class="sovle-limit">鍓╀綑鏃堕棿:{{getRestTime(dispatchInfo.disposeDate)}}</div>
</div>
<div class="sovle-timeline">
- <el-timeline>
+ <el-timeline >
<el-timeline-item :color="mycolor" v-for="item in list" :key="item.id">
<div class="title">
<div class="title-left">銆恵{item.name}}銆戝鐞嗕汉: {{item.disposeRecords && item.disposeRecords.length
@@ -80,7 +80,7 @@
<style lang="scss" scoped>
.sovle-problem {
.sovle-header {
- padding: 0 200px;
+ padding: 0 40px;
display: flex;
line-height: 60px;
justify-content: space-between;
diff --git a/src/views/operate/disposal/casepool/pool/index.vue b/src/views/operate/disposal/casepool/pool/index.vue
index d64c5e7..6f05f22 100644
--- a/src/views/operate/disposal/casepool/pool/index.vue
+++ b/src/views/operate/disposal/casepool/pool/index.vue
@@ -45,7 +45,8 @@
:row-class-name="tableRowClassName"
@selection-change="tableChange"
>
- <el-table-column label="搴忓彿" type="index" min-width="10"> </el-table-column>
+ <el-table-column label="搴忓彿" type="index" min-width="10">
+ </el-table-column>
<el-table-column prop="code" label="浜嬩欢缂栧彿" min-width="18">
<template slot-scope="scope">
<el-link @click="JumpView(scope.row)">{{
@@ -135,14 +136,22 @@
</el-table>
<!-- 璇︽儏椤靛睍绀� -->
<el-dialog
+ custom-class="customWidth"
:visible.sync="dialogView"
- width="60%"
title="鍩虹淇℃伅(浜哄伐)"
v-if="dialogView"
:before-close="handleClose2"
>
- <MyDetail :info="info" v-if="mystatus === 1"></MyDetail>
- <MyIllDetail :info="info" v-else></MyIllDetail>
+ <MyDetail
+ style="min-width: 300px"
+ :info="info"
+ v-if="mystatus === 1"
+ ></MyDetail>
+ <MyIllDetail
+ style="min-width: 500px"
+ :info="info"
+ v-else
+ ></MyIllDetail>
</el-dialog>
<!-- 璋冨害 -->
<el-dialog
@@ -817,3 +826,8 @@
}
}
</style>
+<style>
+.customWidth {
+ width: 1000px !important;
+}
+</style>
--
Gitblit v1.8.0