Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
3a72b0f7 by renchao@pashanhoo.com
Options

style:材料分屏后材料信息样式的修改

1 parent c70eb0e5
Inline Side-by-side
Showing 2 changed files with 111 additions and 118 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-10-12 09:49:08
* @LastEditTime: 2023-10-13 15:02:59
-->
<template>
<div class="rlPopup">
......@@ -346,7 +346,7 @@
// 查看大图
.rlPopup {
position: relative;
width: 100%;
width: 80%;
text-align: center;
height: 100%;
......@@ -402,7 +402,7 @@
&-button {
display: flex;
justify-content: center;
flex-wrap: wrap;
.fileUpdate {
margin: 0 10px;
}
......
......@@ -5,55 +5,53 @@
-->
<template>
<div class="clxx">
<div class="right">
<!-- 材料预览 -->
<div class="clyl-box">
<div class="menu-tree">
<el-button
type="primary"
native-type="submit"
@click="viewDetail"
style="width: 100%; margin-top: 10px">申请材料目录</el-button>
<div class="item">
材料目录({{ tableData.length }})
<div class="tableList">
<div
style="
<!-- 材料预览 -->
<div class="clyl-box">
<div class="menu-tree">
<el-button
type="primary"
native-type="submit"
@click="viewDetail"
style="width: 100%; margin-top: 10px">申请材料目录</el-button>
<div class="item">
材料目录({{ tableData.length }})
<div class="tableList">
<div
style="
text-align: center;
line-height: 20px;
color: black;
font-size: 14px;
"
v-if="tableData.length == 0">
暂无数据
</div>
<div
v-for="(item, index) in tableData"
:key="item.bsmSj"
:class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
@click="treeClick(item, index)">
<span v-if="item.isrequired == 1" class="required">必选</span>
<span class="item_name">{{ item.sjmc }}</span>
<span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span>
</div>
v-if="tableData.length == 0">
暂无数据
</div>
<div
v-for="(item, index) in tableData"
:key="item.bsmSj"
:class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
@click="treeClick(item, index)">
<span v-if="item.isrequired == 1" class="required">必选</span>
<span class="item_name">{{ item.sjmc }}</span>
<span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span>
</div>
</div>
<el-button
type="primary"
native-type="submit"
style="width: 100%"
@click="handleAdd()"
v-if="ableOperation">新增</el-button>
</div>
<image-preview
ref="imageRef"
v-if="tableData.length > 0"
:previewImg="previewImg"
:ableOperation="ableOperation"
@updateList="updateList"
@nextPriview="nextPriview"
@prevPriview="prevPriview" />
<el-button
type="primary"
native-type="submit"
style="width: 100%"
@click="handleAdd()"
v-if="ableOperation">新增</el-button>
</div>
<image-preview
ref="imageRef"
v-if="tableData.length > 0"
:previewImg="previewImg"
:ableOperation="ableOperation"
@updateList="updateList"
@nextPriview="nextPriview"
@prevPriview="prevPriview" />
</div>
<clxxAddDialog v-model="isDialog" />
</div>
......@@ -382,93 +380,88 @@
}
}
.right {
.clmlmx-box {
margin: 0 auto;
.title {
text-align: center;
height: 60px;
line-height: 60px;
border: 1px solid #dfe6ec;
font-size: 20px;
background: #81d3f81a;
margin-bottom: -1px;
}
}
.clyl-box {
width: 100%;
height: 100%;
display: flex;
.tableList {
margin-top: 10px;
}
.menu-tree {
width: 20%;
min-width: 160px;
height: 100%;
font-size: 14px;
border-right: 1px dotted #d9d9d9;
padding: 0 15px;
.clmlmx-box {
margin: 0 auto;
.title {
.item {
line-height: 30px;
padding-top: 5px;
border-bottom: 1px solid #e8e8e8;
font-size: 16px;
text-align: center;
height: 60px;
line-height: 60px;
border: 1px solid #dfe6ec;
font-size: 20px;
background: #81d3f81a;
margin-bottom: -1px;
}
}
color: $light-blue;
.clyl-box {
width: 100%;
height: 100%;
display: flex;
.tableList {
margin-top: 10px;
}
.menu-tree {
width: 20%;
min-width: 160px;
height: 100%;
font-size: 14px;
border-right: 1px dotted #d9d9d9;
padding: 0 15px;
.itemIcon {
float: right;
line-height: 60px;
cursor: pointer;
}
.item {
line-height: 30px;
padding-top: 5px;
.child {
line-height: 32px;
border-bottom: 1px solid #e8e8e8;
font-size: 16px;
text-align: center;
padding-left: 10px;
color: #6b6b6b;
cursor: pointer;
box-sizing: border-box;
border-radius: 6px;
line-height: 20px;
transition: all 0.3s;
padding: 8px 0;
overflow: hidden;
display: flex;
justify-content: space-between;
}
.item_name {
flex: 1;
font-size: 14px;
display: flex;
justify-content: center;
}
.child:hover {
color: $light-blue;
transform: scale(1.1);
}
.itemIcon {
float: right;
line-height: 60px;
cursor: pointer;
}
.child {
line-height: 32px;
border-bottom: 1px solid #e8e8e8;
padding-left: 10px;
color: #6b6b6b;
cursor: pointer;
box-sizing: border-box;
border-radius: 6px;
line-height: 20px;
transition: all 0.3s;
padding: 8px 0;
overflow: hidden;
display: flex;
justify-content: space-between;
}
.item_name {
flex: 1;
font-size: 14px;
display: flex;
justify-content: center;
}
.child:hover {
color: $light-blue;
transform: scale(1.1);
}
.checked {
border: 1px solid $light-blue;
color: $light-blue;
}
.checked {
border: 1px solid $light-blue;
color: $light-blue;
}
}
}
.clyl-img {
width: 75%;
height: 100%;
background: #f3f4f7;
margin: 0 auto;
position: relative;
}
.clyl-img {
width: 75%;
height: 100%;
background: #f3f4f7;
margin: 0 auto;
position: relative;
}
}
}
......