From 405eeb045cfecff07b80a33582033be6cc52ed33 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 14 十二月 2022 14:36:06 +0800
Subject: [PATCH] 样式修改
---
src/components/detail/index.vue | 463 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 244 insertions(+), 219 deletions(-)
diff --git a/src/components/detail/index.vue b/src/components/detail/index.vue
index 14aeb40..d9a11e0 100644
--- a/src/components/detail/index.vue
+++ b/src/components/detail/index.vue
@@ -1,239 +1,264 @@
<template>
- <div class="view">
- <div class="view-data">
- <div class="data-item">
- <div class="data-item__left">
- <label class="data-title">
- 闂绫诲瀷:
- </label>
- <span class="data-detail">{{ getCategoryLabel(baseCase.category) }}</span>
- </div>
- <div class="data-item__right">
- <label class="data-title">
- 澶х被鍚嶇О:
- </label>
- <span class="data-detail">{{baseCase.violationsVO.categoryText}}</span>
- </div>
- </div>
- <div class="data-item">
- <div class="data-item__left">
- <label class="data-title">
- 灏忕被鍚嶇О:
- </label>
- <span class="data-detail">{{baseCase.violationsVO.typeText}}</span>
- </div>
- <div class="data-item__right">
- <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>
- <span class="data-detail">{{baseCase.violationsVO.actionCause}}</span>
- </div>
- </div>
- <div class="data-item">
- <div class="data-item__left">
- <label class="data-title">
- 鎵�灞炶閬�:
- </label>
- <span class="data-detail">{{baseCase.streetText}}</span>
- </div>
- <div class="data-item__right">
- <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>
- <span class="data-detail">{{baseCase.site}}</span>
- </div>
- </div>
- <div class="data-item">
- <div class="data-item__left">
- <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>
- <span class="data-detail">{{baseCase.violationsVO.description}}</span>
- </div>
- </div>
- <div class="data-user">
- <div class="data-item">
- <div class="data-item__left">
- <label class="data-title">
- 鍙嶆槧浜�:
- </label>
- <span class="data-detail">{{baseCase.violationsVO.informant}}</span>
- </div>
- <div class="data-item__right">
- <label class="data-title">
- 鑱旂郴鏂瑰紡:
- </label>
- <span class="data-detail">{{baseCase.violationsVO.informantPhoneCode}}</span>
- </div>
- </div>
- <div class="data-item">
- <div class="data-item__left">
- <label class="data-title">
- 韬唤璇佸彿:
- </label>
- <span class="data-detail">{{baseCase.violationsVO.informantIdCard}}</span>
- </div>
- </div>
- </div>
+ <div class="view">
+ <div class="view-data">
+ <div class="data-item">
+ <div class="data-item__left">
+ <label class="data-title"> 闂绫诲瀷: </label>
+ <span class="data-detail">{{
+ getCategoryLabel(baseCase.category)
+ }}</span>
</div>
- <div class="view-process">
- <div class="process-header">
- <div class="process-title-item" v-for="item in titleList" :key="item.title"
- @click="changeComponent(item.index)">
- <div :class="['process-title',activeIndex===item.index ? 'title-active' : '' ]">{{item.title}}</div>
- <div :class="['under-line',activeIndex===item.index ? 'line-active' : '' ]"></div>
- </div>
- </div>
- <div class="show-item">
- <div class="show-wrap">
- <MyProcess v-if="activeIndex === 1" :handlePassVo="handlePassVo" :baseCase="baseCase"></MyProcess>
- <MyFilePicture v-else-if="activeIndex === 2" :filesPictureVo="filesPictureVo" :mycode='mycode'></MyFilePicture>
- <MySovleProblem v-else-if="activeIndex === 3" :baseCase="baseCase" :handlePassVo="handlePassVo"></MySovleProblem>
- <MyScene v-else :currentSitVo="currentSitVo" :baseCase="baseCase"></MyScene>
- </div>
- </div>
+ <div class="data-item__right">
+ <label class="data-title"> 澶х被鍚嶇О: </label>
+ <span class="data-detail">{{
+ baseCase.violationsVO.categoryText
+ }}</span>
</div>
+ </div>
+ <div class="data-item">
+ <div class="data-item__left">
+ <label class="data-title"> 灏忕被鍚嶇О: </label>
+ <span class="data-detail">{{ baseCase.violationsVO.typeText }}</span>
+ </div>
+ <div class="data-item__right">
+ <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>
+ <span class="data-detail">{{
+ baseCase.violationsVO.actionCause
+ }}</span>
+ </div>
+ </div>
+ <div class="data-item">
+ <div class="data-item__left">
+ <label class="data-title"> 鎵�灞炶閬�: </label>
+ <span class="data-detail">{{ baseCase.streetText }}</span>
+ </div>
+ <div class="data-item__right">
+ <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>
+ <span class="data-detail">{{ baseCase.site }}</span>
+ </div>
+ </div>
+ <div class="data-item">
+ <div class="data-item__left">
+ <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>
+ <span class="data-detail">{{
+ baseCase.violationsVO.description
+ }}</span>
+ </div>
+ </div>
+ <div class="data-user">
+ <div class="data-item">
+ <div class="data-item__left">
+ <label class="data-title"> 鍙嶆槧浜�: </label>
+ <span class="data-detail">{{
+ baseCase.violationsVO.informant
+ }}</span>
+ </div>
+ <div class="data-item__right">
+ <label class="data-title"> 鑱旂郴鏂瑰紡: </label>
+ <span class="data-detail">{{
+ baseCase.violationsVO.informantPhoneCode
+ }}</span>
+ </div>
+ </div>
+ <div class="data-item">
+ <div class="data-item__left">
+ <label class="data-title"> 韬唤璇佸彿: </label>
+ <span class="data-detail">{{
+ baseCase.violationsVO.informantIdCard
+ }}</span>
+ </div>
+ </div>
+ </div>
</div>
+ <div class="view-process">
+ <div class="process-header">
+ <div
+ class="process-title-item"
+ v-for="item in titleList"
+ :key="item.title"
+ @click="changeComponent(item.index)"
+ >
+ <div
+ :class="[
+ 'process-title',
+ activeIndex === item.index ? 'title-active' : '',
+ ]"
+ >
+ {{ item.title }}
+ </div>
+ <div
+ :class="[
+ 'under-line',
+ activeIndex === item.index ? 'line-active' : '',
+ ]"
+ ></div>
+ </div>
+ </div>
+ <div class="show-item">
+ <div class="show-wrap">
+ <MyProcess
+ v-if="activeIndex === 1"
+ :handlePassVo="handlePassVo"
+ :baseCase="baseCase"
+ ></MyProcess>
+ <MyFilePicture
+ v-else-if="activeIndex === 2"
+ :filesPictureVo="filesPictureVo"
+ :mycode="mycode"
+ ></MyFilePicture>
+ <MySovleProblem
+ v-else-if="activeIndex === 3"
+ :baseCase="baseCase"
+ :handlePassVo="handlePassVo"
+ ></MySovleProblem>
+ <MyScene
+ v-else
+ :currentSitVo="currentSitVo"
+ :baseCase="baseCase"
+ ></MyScene>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import MyProcess from '@/components/process'
-import MyFilePicture from '@/components/filePictrue'
-import MySovleProblem from '@/components/solveProblem'
-import MyScene from '@/components/scene'
+import MyProcess from "@/components/process";
+import MyFilePicture from "@/components/filePictrue";
+import MySovleProblem from "@/components/solveProblem";
+import MyScene from "@/components/scene";
import { CATEGOTY } from "@/utils/helper";
export default {
- components: {
- MyProcess, MyFilePicture, MySovleProblem, MyScene
- },
- data() {
- return {
- myInfo: {
-
- },
- activeIndex: 1,
- titleList: [
- {
- title: '鍔炵悊缁忚繃',
- index: 1,
- },
- {
- title: '妗堝嵎鍥剧墖',
- index: 2,
- },
- {
- title: '闂澶勭悊',
- index: 3,
- },
- {
- title: '鐜板満鎯呭喌',
- index: 4,
- },
- ],
- baseCase:{},
- handlePassVo:{},
- currentSitVo:{},
- filesPictureVo:{}
-
- }
- },
- created() {
- this.baseCase = this.info.baseCase;
- this.handlePassVo = this.info.handlePassVo;
- this.currentSitVo = this.info.currentSitVo;
- this.filesPictureVo = this.info.filesPictureVo;
- },
- methods: {
- changeComponent(index) {
- this.activeIndex = index;
+ components: {
+ MyProcess,
+ MyFilePicture,
+ MySovleProblem,
+ MyScene,
+ },
+ data() {
+ return {
+ myInfo: {},
+ activeIndex: 1,
+ titleList: [
+ {
+ title: "鍔炵悊缁忚繃",
+ index: 1,
},
- getCategoryLabel(category) {
- return CATEGOTY.find(item => item.value === category).label;
- }
+ {
+ title: "妗堝嵎鍥剧墖",
+ index: 2,
+ },
+ {
+ title: "闂澶勭悊",
+ index: 3,
+ },
+ {
+ title: "鐜板満鎯呭喌",
+ index: 4,
+ },
+ ],
+ baseCase: {},
+ handlePassVo: {},
+ currentSitVo: {},
+ filesPictureVo: {},
+ };
+ },
+ created() {
+ this.baseCase = this.info.baseCase;
+ this.handlePassVo = this.info.handlePassVo;
+ this.currentSitVo = this.info.currentSitVo;
+ this.filesPictureVo = this.info.filesPictureVo;
+ },
+ methods: {
+ changeComponent(index) {
+ this.activeIndex = index;
},
- props: ['info','mycode']
-}
+ getCategoryLabel(category) {
+ return CATEGOTY.find((item) => item.value === category).label;
+ },
+ },
+ props: ["info", "mycode"],
+};
</script>
<style lang="scss" scoped>
.view {
- display: flex;
- padding: 20px;
+ display: flex;
+ padding: 20px;
- .view-data {
- color: #4b9bb7;
- flex: 4;
- padding: 0 30px 0 20px;
-
- .data-item {
- display: flex;
- justify-content: space-between;
- line-height: 40px;
- }
-
- border: 1px solid #17324c;
+ .view-data {
+ color: #4b9bb7;
+ // flex: 4;
+ padding: 0 30px 0 20px;
+ width: 480px;
+ .data-item {
+ display: flex;
+ justify-content: space-between;
+ line-height: 40px;
}
- .view-process {
- flex: 6;
- margin-left: 20px;
-
- .process-header {
- display: flex;
- line-height: 40px;
-
- .process-title-item {
- width: 120px;
- text-align: center;
-
- .under-line {
- height: 2px;
- width: 100%;
- }
-
- .title-active {
- color: #4b9bb7;
- }
-
- .line-active {
- background-color: #4b9bb7;
- border-radius: 20px;
- }
- }
- }
-
- .show-item {
- overflow: hidden;
- height: 600px;
- position: relative;
- .show-wrap{
- overflow: scroll;
- height: 600px;
- }
- }
+ border: 1px solid #17324c;
+ .data-detail {
+ line-height: 1.8;
+ max-width: 240px;
+ display: inline-grid;
}
+ }
+
+ .view-process {
+ flex: 6;
+ margin-left: 20px;
+
+ .process-header {
+ display: flex;
+ line-height: 40px;
+
+ .process-title-item {
+ width: 120px;
+ text-align: center;
+
+ .under-line {
+ height: 2px;
+ width: 100%;
+ }
+
+ .title-active {
+ color: #4b9bb7;
+ }
+
+ .line-active {
+ background-color: #4b9bb7;
+ border-radius: 20px;
+ }
+ }
+ }
+
+ .show-item {
+ overflow: hidden;
+ height: 600px;
+ position: relative;
+ .show-wrap {
+ overflow: auto;
+ height: 600px;
+ }
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0