123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <!--
- *@description: 房间详情
- *@author: yh Fu
- *@date: 2023-12-27 11:04:23
- *@version: V1.0.5
- -->
- <template>
- <el-dialog
- :visible.sync="dialogVisible"
- title=""
- width="60%"
- append-to-body
- custom-class="ConstructionDetailsDialog">
- <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="projectTabs">
- <el-tab-pane label="拆旧管" name="0">
- <el-collapse v-model="activeNames" class="rmOldPie">
- <el-collapse-item name="1">
- <template slot="title">
- <div style="display: flex;width: 100%;height: 100%;">
- <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
- </div>
- <h2 style="margin-left: 1%;font-weight: 700;">2023-12-25</h2>
- </div>
-
- </template>
- <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
- <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
- </el-collapse-item>
- <el-collapse-item name="2">
- <template slot="title">
- <div style="display: flex;width: 100%;height: 100%;">
- <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
- </div>
- <h2 style="margin-left: 1%;font-weight: 700;">2023-11-30</h2>
- </div>
- </template>
- <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
- <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
- </el-collapse-item>
- <el-collapse-item name="3">
- <template slot="title">
- <div style="display: flex;width: 100%;height: 100%;">
- <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
- </div>
- <h2 style="margin-left: 1%;font-weight: 700;">2023-11-27</h2>
- </div>
- </template>
- <div>简化流程:设计简洁直观的操作流程;</div>
- <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
- <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
- </el-collapse-item>
- <el-collapse-item name="4">
- <template slot="title">
- <div style="display: flex;width: 100%;height: 100%;">
- <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
- </div>
- <h2 style="margin-left: 1%;font-weight: 700;">2023-11-20</h2>
- </div>
- </template>
- <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
- <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
- </el-collapse-item>
- <el-collapse-item name="5">
- <template slot="title">
- <div style="display: flex;width: 100%;height: 100%;">
- <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
- </div>
- <h2 style="margin-left: 1%;font-weight: 700;">2023-11-15</h2>
- </div>
- </template>
- <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
- <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
- </el-collapse-item>
- <el-collapse-item name="6">
- <template slot="title">
- <div style="display: flex;width: 100%;height: 100%;">
- <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
- </div>
- <h2 style="margin-left: 1%;font-weight: 700;">2023-11-7</h2>
- </div>
- </template>
- <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
- <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
- </el-collapse-item>
- <el-collapse-item name="7">
- <template slot="title">
- <div style="display: flex;width: 100%;height: 100%;">
- <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
- </div>
- <h2 style="margin-left: 1%;font-weight: 700;">2023-11-1</h2>
- </div>
- </template>
- <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
- <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
- </el-collapse-item>
- </el-collapse>
- </el-tab-pane>
- <el-tab-pane label="立杠" name="1">立杠</el-tab-pane>
- <el-tab-pane label="挂表" name="2">挂表</el-tab-pane>
- <el-tab-pane label="表后管" name="3">表后管</el-tab-pane>
- <el-tab-pane label="管和阀" name="4">管和阀</el-tab-pane>
- <el-button class="check" @click="checkWorking">审核</el-button>
- </el-tabs>
- </el-dialog>
- </template>
- <script>
- export default {
- name:'ConstructionDetails',
- data(){
- return {
- dialogVisible:true,
- activeNames: ['0']
- }
- },
- methods:{
- // 单项审核
- checkWorking(){
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- ::v-deep .el-dialog{
- height: 85%;
- .el-dialog__body{
- overflow: hidden;
- height: 94%;
- }
- }
- .ConstructionDetailsDialog{
- position: absolute;
- .projectTabs{
- height: 100%;
- overflow: hidden;
- overflow-y: scroll;
- margin-top: 4%;
- ::v-deep .el-tabs__content{
- margin-top: 1%;
- }
- ::v-deep .el-tabs__nav{
- border: none;
- }
- ::v-deep .el-tabs__item{
- width: 47%;
- border: 1px solid #797979;
- border-radius: 5px;
- }
- ::v-deep .el-tabs__item.is-active{
- background-color: #169BD5;
- color: #fff;
- }
- ::v-deep .el-tabs__header{
- position: fixed;
- width: 53%;
- border: none;
- top: 13%;
- }
- ::v-deep .el-collapse-item__wrap{
- padding: 0 4%;
- }
- .check{
- position: fixed;
- right: 22.1%;
- top: 13.1%;
- height: 4.6%;
- background-color: #CC9900;
- color: #fff;
- }
- }
- .projectTabs::-webkit-scrollbar{
- display: none;
- }
- ::v-deep .rmOldPie{
- .el-collapse-item{
- border: none;
- }
- }
- }
- </style>
|