样式修改

zhanghua

2022-12-14 405eeb045cfecff07b80a33582033be6cc52ed33

 src/components/detail/index.vue

@@ -3,163 +3,183 @@
        <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>
          <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>
          <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>
          <label class="data-title"> 小类名称: </label>
                    <span class="data-detail">{{baseCase.violationsVO.typeText}}</span>
                </div>
                <div class="data-item__right">
                    <label class="data-title">
                        事件等级:
                    </label>
          <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>
          <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>
          <label class="data-title"> 所属街道: </label>
                    <span class="data-detail">{{baseCase.streetText}}</span>
                </div>
                <div class="data-item__right">
                    <label class="data-title">
                        所属社区:
                    </label>
          <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>
                    <span class="data-detail">{{baseCase.violationsVO.description}}</span>
          <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>
            <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>
            <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>
            <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
          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>
          <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
    MyProcess,
    MyFilePicture,
    MySovleProblem,
    MyScene,
    },
    data() {
        return {
            myInfo: {

            },
      myInfo: {},
            activeIndex: 1,
            titleList: [
                {
                    title: '办理经过',
          title: "办理经过",
                    index: 1,
                },
                {
                    title: '案卷图片',
          title: "案卷图片",
                    index: 2,
                },
                {
                    title: '问题处理',
          title: "问题处理",
                    index: 3,
                },
                {
                    title: '现场情况',
          title: "现场情况",
                    index: 4,
                },
            ], 
            baseCase:{},
            handlePassVo:{},
            currentSitVo:{},
            filesPictureVo:{}
            
        }
      filesPictureVo: {},
    };
    },
    created() {
        this.baseCase = this.info.baseCase;
@@ -172,11 +192,11 @@
            this.activeIndex = index;
        },
      getCategoryLabel(category) {
          return CATEGOTY.find(item => item.value === category).label;
      }
      return CATEGOTY.find((item) => item.value === category).label;
    },
    props: ['info','mycode']
}
  },
  props: ["info", "mycode"],
};
</script>
<style lang="scss" scoped>
.view {
@@ -185,9 +205,9 @@

    .view-data {
        color: #4b9bb7;
        flex: 4;
    // flex: 4;
        padding: 0 30px 0 20px;

    width: 480px;
        .data-item {
            display: flex;
            justify-content: space-between;
@@ -195,6 +215,11 @@
        }

        border: 1px solid #17324c;
    .data-detail {
      line-height: 1.8;
      max-width: 240px;
      display: inline-grid;
    }
    }

    .view-process {
@@ -230,7 +255,7 @@
            height: 600px;
            position: relative;
            .show-wrap{
                overflow: scroll;
        overflow: auto;
                height: 600px;
            }
        }