index.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <!--
  2. *@description: 房间详情
  3. *@author: yh Fu
  4. *@date: 2023-12-27 11:04:23
  5. *@version: V1.0.5
  6. -->
  7. <template>
  8. <el-dialog
  9. :visible.sync="dialogVisible"
  10. title=""
  11. width="60%"
  12. append-to-body
  13. custom-class="ConstructionDetailsDialog">
  14. <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="projectTabs">
  15. <el-tab-pane label="拆旧管" name="0">
  16. <el-collapse v-model="activeNames" class="rmOldPie">
  17. <el-collapse-item name="1">
  18. <template slot="title">
  19. <div style="display: flex;width: 100%;height: 100%;">
  20. <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
  21. </div>
  22. <h2 style="margin-left: 1%;font-weight: 700;">2023-12-25</h2>
  23. </div>
  24. </template>
  25. <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
  26. <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
  27. </el-collapse-item>
  28. <el-collapse-item name="2">
  29. <template slot="title">
  30. <div style="display: flex;width: 100%;height: 100%;">
  31. <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
  32. </div>
  33. <h2 style="margin-left: 1%;font-weight: 700;">2023-11-30</h2>
  34. </div>
  35. </template>
  36. <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
  37. <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
  38. </el-collapse-item>
  39. <el-collapse-item name="3">
  40. <template slot="title">
  41. <div style="display: flex;width: 100%;height: 100%;">
  42. <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
  43. </div>
  44. <h2 style="margin-left: 1%;font-weight: 700;">2023-11-27</h2>
  45. </div>
  46. </template>
  47. <div>简化流程:设计简洁直观的操作流程;</div>
  48. <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
  49. <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
  50. </el-collapse-item>
  51. <el-collapse-item name="4">
  52. <template slot="title">
  53. <div style="display: flex;width: 100%;height: 100%;">
  54. <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
  55. </div>
  56. <h2 style="margin-left: 1%;font-weight: 700;">2023-11-20</h2>
  57. </div>
  58. </template>
  59. <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
  60. <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
  61. </el-collapse-item>
  62. <el-collapse-item name="5">
  63. <template slot="title">
  64. <div style="display: flex;width: 100%;height: 100%;">
  65. <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
  66. </div>
  67. <h2 style="margin-left: 1%;font-weight: 700;">2023-11-15</h2>
  68. </div>
  69. </template>
  70. <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
  71. <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
  72. </el-collapse-item>
  73. <el-collapse-item name="6">
  74. <template slot="title">
  75. <div style="display: flex;width: 100%;height: 100%;">
  76. <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
  77. </div>
  78. <h2 style="margin-left: 1%;font-weight: 700;">2023-11-7</h2>
  79. </div>
  80. </template>
  81. <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
  82. <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
  83. </el-collapse-item>
  84. <el-collapse-item name="7">
  85. <template slot="title">
  86. <div style="display: flex;width: 100%;height: 100%;">
  87. <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
  88. </div>
  89. <h2 style="margin-left: 1%;font-weight: 700;">2023-11-1</h2>
  90. </div>
  91. </template>
  92. <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
  93. <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
  94. </el-collapse-item>
  95. </el-collapse>
  96. </el-tab-pane>
  97. <el-tab-pane label="立杠" name="1">立杠</el-tab-pane>
  98. <el-tab-pane label="挂表" name="2">挂表</el-tab-pane>
  99. <el-tab-pane label="表后管" name="3">表后管</el-tab-pane>
  100. <el-tab-pane label="管和阀" name="4">管和阀</el-tab-pane>
  101. <el-button class="check" @click="checkWorking">审核</el-button>
  102. </el-tabs>
  103. </el-dialog>
  104. </template>
  105. <script>
  106. export default {
  107. name:'ConstructionDetails',
  108. data(){
  109. return {
  110. dialogVisible:true,
  111. activeNames: ['0']
  112. }
  113. },
  114. methods:{
  115. // 单项审核
  116. checkWorking(){
  117. }
  118. }
  119. }
  120. </script>
  121. <style lang="scss" scoped>
  122. ::v-deep .el-dialog{
  123. height: 85%;
  124. .el-dialog__body{
  125. overflow: hidden;
  126. height: 94%;
  127. }
  128. }
  129. .ConstructionDetailsDialog{
  130. position: absolute;
  131. .projectTabs{
  132. height: 100%;
  133. overflow: hidden;
  134. overflow-y: scroll;
  135. margin-top: 4%;
  136. ::v-deep .el-tabs__content{
  137. margin-top: 1%;
  138. }
  139. ::v-deep .el-tabs__nav{
  140. border: none;
  141. }
  142. ::v-deep .el-tabs__item{
  143. width: 47%;
  144. border: 1px solid #797979;
  145. border-radius: 5px;
  146. }
  147. ::v-deep .el-tabs__item.is-active{
  148. background-color: #169BD5;
  149. color: #fff;
  150. }
  151. ::v-deep .el-tabs__header{
  152. position: fixed;
  153. width: 53%;
  154. border: none;
  155. top: 13%;
  156. }
  157. ::v-deep .el-collapse-item__wrap{
  158. padding: 0 4%;
  159. }
  160. .check{
  161. position: fixed;
  162. right: 22.1%;
  163. top: 13.1%;
  164. height: 4.6%;
  165. background-color: #CC9900;
  166. color: #fff;
  167. }
  168. }
  169. .projectTabs::-webkit-scrollbar{
  170. display: none;
  171. }
  172. ::v-deep .rmOldPie{
  173. .el-collapse-item{
  174. border: none;
  175. }
  176. }
  177. }
  178. </style>