全流程管理实施界面调整，同屏对比文件预览

src/components/common/StepsMyBox.vue

@@ -13,41 +13,105 @@
     >
       <div>
         <div class="dialog_title_info">
-          <div>立项年度：{{ formData && formData.c_lxndwt ? formData.c_lxndwt : "--" }}</div>
-          <div>被审计镇：{{ clickData.c_owning_street_town_str ? clickData.c_owning_street_town_str : "--" }}</div>
+          <div>
+            立项年度：{{
+              formData && formData.c_lxndwt ? formData.c_lxndwt : "--"
+            }}
+          </div>
+          <div>
+            被审计镇：{{
+              clickData.c_owning_street_town_str
+                ? clickData.c_owning_street_town_str
+                : "--"
+            }}
+          </div>
+        </div>
+        <div class="dialog_title_info">
+          问题金额（万元）：{{
+            formData && formData.c_wtjewt ? formData.c_wtjewt : "--"
+          }}
         </div>
-        <div class="dialog_title_info">问题金额（万元）：{{ formData && formData.c_wtjewt ? formData.c_wtjewt : "--" }}</div>
         <div class="dialog_title">审计报告中的问题反映情况</div>
-        <div v-for="(item, index) in dialogData" :key="index" class="dialog_table">
+        <div
+          v-for="(item, index) in dialogData"
+          :key="index"
+          class="dialog_table"
+        >
           <div>{{ item.title }}</div>
-          <div>{{ formData && formData[item.columnName] ? formData[item.columnName] : "--" }}</div>
+          <div>
+            {{
+              formData && formData[item.columnName]
+                ? formData[item.columnName]
+                : "--"
+            }}
+          </div>
         </div>
         <div class="dialog_title3">
-          <el-button size="mini" type="primary" class="infoBut" @click="gotoView(formData)">查看疑点图斑</el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            class="infoBut"
+            @click="gotoView(formData)"
+            >查看疑点图斑</el-button
+          >
         </div>
       </div>
     </el-dialog>
+    <el-dialog
+      custom-class="myMission"
+      title="图片预览"
+      :append-to-body="true"
+      :modal="true"
+      :fullscreen="true"
+      :visible.sync="previewVisible"
+      :before-close="handleClose"
+    >
+      <div class="preview-box">
+        <el-image
+          style="width: 100%; height: auto"
+          :src="currentImg"
+        ></el-image>
+      </div>
+    </el-dialog>
     <div style="padding: 10px">
-      <el-button type="primary" icon="el-icon-arrow-left" @click="backEvent()">返回上级</el-button>
+      <el-button type="primary" icon="el-icon-arrow-left" @click="backEvent()"
+        >返回上级</el-button
+      >
     </div>
     <!-- 全流程管理主题 -->
     <div class="StepsMyBox_main">
       <!-- 左侧项目明细 -->
       <div class="StepsMyBox_main_left">
         <div class="StepsMyBox_main_left_main">
-          <div class="StepsMyBox_main_left_main_title">{{ clickData.c_project_name ? clickData.c_project_name : "--" }}</div>
+          <div class="StepsMyBox_main_left_main_title">
+            {{ clickData.c_project_name ? clickData.c_project_name : "--" }}
+          </div>
           <div class="StepsMyBox_main_left_main_info">基本信息</div>
           <div class="StepsMyBox_main_left_main_info">
             <div>立项日期:</div>
-            <div>{{ clickData.c_create_date ? $dayjs(clickData.c_create_date).format("YYYY-MM-DD") : "--" }}</div>
+            <div>
+              {{
+                clickData.c_create_date
+                  ? $dayjs(clickData.c_create_date).format("YYYY-MM-DD")
+                  : "--"
+              }}
+            </div>
           </div>
           <div class="StepsMyBox_main_left_main_info">
             <div>项目类型:</div>
-            <div>{{ clickData.c_task_type_str ? clickData.c_task_type_str : "--" }}</div>
+            <div>
+              {{ clickData.c_task_type_str ? clickData.c_task_type_str : "--" }}
+            </div>
           </div>
           <div class="StepsMyBox_main_left_main_info">
             <div>涉及街镇:</div>
-            <div>{{ clickData.c_owning_street_town_str ? clickData.c_owning_street_town_str : "--" }}</div>
+            <div>
+              {{
+                clickData.c_owning_street_town_str
+                  ? clickData.c_owning_street_town_str
+                  : "--"
+              }}
+            </div>
           </div>
           <div class="StepsMyBox_main_left_main_info">
             <div>牵头部门:</div>
@@ -86,7 +150,9 @@
               <template slot="title">
                 <div
                   class="stepsTitle"
-                  :style="{ background: stepsIndex == index + 1 ? '#00aaff' : '' }"
+                  :style="{
+                    background: stepsIndex == index + 1 ? '#00aaff' : '',
+                  }"
                   @click="changeStepsIndex(index + 1)"
                 >
                   {{ item.title }}
@@ -103,33 +169,90 @@
         <div class="stepsInfoBox">
           <!-- 流程明细文字描述 -->
           <div>
-            {{ stepsList[stepsIndex - 1].info.text ? clickData.c_project_name + stepsList[stepsIndex - 1].info.text : "" }}
+            {{
+              stepsList[stepsIndex - 1].info.text
+                ? clickData.c_project_name + stepsList[stepsIndex - 1].info.text
+                : ""
+            }}
           </div>
           <!-- 流程明细文件预览（通知和报告会用到文件预览） -->
-          <FilePreView ref="filePreview" v-show="fileView" style="height: calc(100% - 30px)" />
+          <FilePreView
+            ref="filePreview"
+            v-show="fileView"
+            style="height: calc(100% - 30px)"
+          />
           <!-- 流程明细-实施列表 -->
-          <div v-if="stepsList[stepsIndex - 1].info.infos">
-            <div v-for="(item, index) in stepsList[stepsIndex - 1].info.infos" :key="item.index" style="padding-bottom: 1rem">
-              <span
-                :style="{ fontWeight: index != 0 ? 'none' : 'bold', paddingLeft: index != 0 ? '1rem' : '0px' }"
-                class="infoTitle"
-                ><div v-if="index != 0" class="infoIcon"></div>
-                {{ item.title }}</span
-              ><el-button
-                v-if="item.id"
-                size="mini"
-                type="primary"
-                class="infoBut"
-                style="margin-left: 2rem"
-                @click="getInfoById(item.id)"
-                >查看详情</el-button
+
+          <div
+            v-if="stepsList[stepsIndex - 1].info.executeBtns"
+            style="height: 100%; width: 100%"
+          >
+            <!-- <div c v-for=""></div> -->
+            <div class="btn-box">
+              <div
+                class="button-style"
+                :class="{ checked: executeBtnChecked === item.name }"
+                v-for="item in stepsList[stepsIndex - 1].info.executeBtns"
+                :key="item.id"
+                @click="toggleExecuteMenu(item)"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+            <div class="content" v-if="executeBtnChecked === '操作日志'">
+              <div
+                v-for="(item, index) in stepsList[stepsIndex - 1].info
+                  .executeSteps"
+                :key="item.index"
+                style="padding-bottom: 1rem"
               >
+                <span
+                  :style="{
+                    fontWeight: index != 0 ? 'none' : 'bold',
+                    paddingLeft: index != 0 ? '1rem' : '0px',
+                  }"
+                  class="infoTitle"
+                  ><div v-if="index != 0" class="infoIcon"></div>
+                  {{ item.title }}</span
+                ><el-button
+                  v-if="item.id"
+                  size="mini"
+                  type="primary"
+                  class="infoBut"
+                  style="margin-left: 2rem"
+                  @click="getInfoById(item.id)"
+                  >查看详情</el-button
+                >
+              </div>
+            </div>
+            <div class="content" v-if="executeBtnChecked === '阶段报告'">
+              <div
+                v-for="item in stepsList[stepsIndex - 1].info.executeFiles"
+                :key="item.id"
+                style="padding-bottom: 1rem"
+              >
+                <div class="content-item">
+                  <div class="title">{{ item.title }}</div>
+                  <div class="btn">
+                    <el-button
+                      size="normal"
+                      type="primary"
+                      @click="previewImg(item)"
+                      >预览</el-button
+                    >
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
+
           <!-- 流程明细-整改表格 -->
           <div v-if="stepsList[stepsIndex - 1].info.tableData">
             <div class="flexBox">
-              <div v-for="(value, key) in stepsList[stepsIndex - 1].info.props" :key="key">
+              <div
+                v-for="(value, key) in stepsList[stepsIndex - 1].info.props"
+                :key="key"
+              >
                 <div class="tableTitle">{{ value }}</div>
               </div>
             </div>
@@ -139,14 +262,21 @@
               class="flexBox"
               style="padding: 0.5rem 0"
             >
-              <div v-for="(value, key) in stepsList[stepsIndex - 1].info.props" :key="key">
-                <span v-if="key != 'opt'">{{ stepsList[stepsIndex - 1].info.tableData[index][key] }}</span>
+              <div
+                v-for="(value, key) in stepsList[stepsIndex - 1].info.props"
+                :key="key"
+              >
+                <span v-if="key != 'opt'">{{
+                  stepsList[stepsIndex - 1].info.tableData[index][key]
+                }}</span>
                 <el-button
                   v-else
                   size="mini"
                   type="primary"
                   class="infoBut"
-                  @click="getInfoById(stepsList[stepsIndex - 1].info.tableData[index])"
+                  @click="
+                    getInfoById(stepsList[stepsIndex - 1].info.tableData[index])
+                  "
                 >
                   查看详情
                 </el-button>
@@ -170,13 +300,19 @@ export default {
   components: { FilePreView },
   data() {
     return {
+      currentImg: "",
+      previewPopupShow: false,
+      executeBtnChecked: "操作日志",
       // 当前或默认选中的步骤条下标加一
+      baseUrl: "/dms",
       stepsIndex: 6,
       stepsIndexNow: 6,
       // 是否显示在线文档预览
       fileView: false,
       // 整改中的查看详情弹窗状态
       dialogVisible: false,
+      // 实施中的预览功能查看图片
+      previewVisible: false,
       // 该项目关联任务列表
       tableData: [],
       // 暂存对象
@@ -189,7 +325,7 @@ export default {
         { title: "问题定性二级", columnName: "c_wtdx2wt", info: "--" },
         { title: "问题事项", columnName: "c_wtsxwt", info: "--" },
         { title: "使用法条", columnName: "c_syftwt", info: "--" },
-        { title: "边审边改情况", columnName: "c_bsbgqkwt", info: "--" }
+        { title: "边审边改情况", columnName: "c_bsbgqkwt", info: "--" },
       ],
       // 步骤条列表
       stepsList: [
@@ -199,67 +335,101 @@ export default {
             tableData: [
               {
                 desc: "报审计委员会审计",
-                date: ""
+                date: "",
               },
               {
                 desc: "区府常务会",
-                date: "2023-02-22"
+                date: "2023-02-22",
               },
               {
                 desc: "区委常务会",
-                date: ""
+                date: "",
               },
               {
                 desc: "区府常务会批示",
-                date: ""
+                date: "",
               },
               {
                 desc: "区府网站公示",
-                date: ""
-              }
+                date: "",
+              },
             ],
-            props: { desc: "节点", date: "日期" }
+            props: { desc: "节点", date: "日期" },
           },
           status: 200,
-          time: "2022-02-22"
+          time: "2022-02-22",
         },
         {
           title: "通知",
-          info: { text: "项目审计通知书.pdf", filePath: "./static/word/sjtzs.pdf" },
+          info: {
+            text: "项目审计通知书.pdf",
+            filePath: "./static/word/sjtzs.pdf",
+          },
           status: 200,
-          time: "2022-08-30"
+          time: "2022-08-30",
         },
         {
           title: "方案",
-          info: { text: "项目实施方案.pdf", filePath: "./static/word/ssfa.pdf" },
+          info: {
+            text: "项目实施方案.pdf",
+            filePath: "./static/word/ssfa.pdf",
+          },
           status: 200,
-          time: "2022-09-07"
+          time: "2022-09-07",
         },
         {
           title: "实施",
           info: {
-            infos: [
+            executeSteps: [
               { title: "李同 共完成了248处疑点审计" },
               { title: "2022.09.13 12:00 创建任务" },
               { title: "2022.09.14 12:00 登录系统" },
-              { title: "2022.09.14 15:23 完成了疑点标记（打开图层：永久基本农田、2020年森林 底图：2022年一季度卫星影像图）" },
-              { title: "2022.09.14 15:24 完成了疑点标记（打开图层：永久基本农田，2020年森林 底图：2021年四季度卫星影像图）" },
-              { title: "2022.09.15 15:24 完成了疑点标记（打开图层：永久基本农田，2020年森林 底图：2021年四季度卫星影像图）" },
-              { title: "2022.09.15 16:00 完成了疑点审计（打开图层：永久基本农田、2018年森林）" },
-              { title: "2022.09.15 16:34 对2022年一季度及2019年四季度卫星影像图进行同屏比对，并打印结果" },
-              { title: "2022.09.15 09:34 对2022年一季度及2019年四季度卫星影像图进行卷帘比对" },
-              { title: "2022.09.16 15:34 发送了标记疑点给用户23452dddy的手机端" },
-              { title: "2022.09.16 08:45 上传了泥潭数据.geojson" }
-            ]
+              {
+                title:
+                  "2022.09.14 15:23 完成了疑点标记（打开图层：永久基本农田、2020年森林 底图：2022年一季度卫星影像图）",
+              },
+              {
+                title:
+                  "2022.09.14 15:24 完成了疑点标记（打开图层：永久基本农田，2020年森林 底图：2021年四季度卫星影像图）",
+              },
+              {
+                title:
+                  "2022.09.15 15:24 完成了疑点标记（打开图层：永久基本农田，2020年森林 底图：2021年四季度卫星影像图）",
+              },
+              {
+                title:
+                  "2022.09.15 16:00 完成了疑点审计（打开图层：永久基本农田、2018年森林）",
+              },
+              {
+                title:
+                  "2022.09.15 16:34 对2022年一季度及2019年四季度卫星影像图进行同屏比对，并打印结果",
+              },
+              {
+                title:
+                  "2022.09.15 09:34 对2022年一季度及2019年四季度卫星影像图进行卷帘比对",
+              },
+              {
+                title: "2022.09.16 15:34 发送了标记疑点给用户23452dddy的手机端",
+              },
+              { title: "2022.09.16 08:45 上传了泥潭数据.geojson" },
+            ],
+            executeBtns: [
+              { id: 1, name: "操作日志" },
+              { id: 2, name: "阶段报告" },
+            ],
+            executeFiles: [],
           },
           status: 200,
-          time: ""
+          time: "",
         },
         {
           title: "报告",
-          info: { text: "项目审计意见.docx", filePath: "./static/word/sjyj.pdf" },
+          info: {
+            text: "项目审计意见.docx",
+            filePath: "./static/word/sjyj.pdf",
+          },
           status: 200,
-          time: "2022-12-15"
+          time: "2022-12-15",
         },
         {
           title: "整改",
@@ -268,158 +438,166 @@ export default {
               {
                 desc: "基本农田非粮化",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "一般耕地非粮化",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "河长巡河流于形式",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分河道监管不到位",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "个别生态环境督察事项整改机制落实不到位",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分监测不合格地块用作水稻种植等",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分地块抛荒闲置",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "复垦新增耕地地块面积较小，难以耕种",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "复垦新增耕地零碎化，难以耕种",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "复垦地块覆土质量不高",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "个别地块拆除整治不到位",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分地块拆后堆物等，环境效益低",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分已拆除复垦地块荒置",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分重大环保事项集体决策程序履行不到位",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "垃圾中转站选址决策不合理",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "工业节能目标任务未完成",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "个别单位建筑能耗超标",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "机关办公建筑能耗申报不完整",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "违规占用设置堆点",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "垃圾违规堆放、导致多支付处置费用",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "备案堆点监管不到位",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分泥库在基本农田内实施",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分泥库重复列入土地平整项目",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "拆分项目，规避公开招标",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "过程监管缺失，底泥来源及处置去向不明。",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "部分设施农用地备案过期",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "对项目招投标工作监管不到位，个别项目串通投标",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "建设程序管理不到位，部分项目先实施后签合同",
                 status: "整改中",
-                endTime: "2023-03-15"
+                endTime: "2023-03-15",
               },
               {
                 desc: "个别地块公益林建后管理养护不到位",
                 status: "整改中",
-                endTime: "2023-03-15"
-              }
+                endTime: "2023-03-15",
+              },
             ],
-            props: { desc: "问题描述", status: "当前状态", endTime: "整改期限", opt: "操作" }
+            props: {
+              desc: "问题描述",
+              status: "当前状态",
+              endTime: "整改期限",
+              opt: "操作",
+            },
           },
           status: 400,
-          time: "进行中"
-        }
-      ]
+          time: "进行中",
+        },
+      ],
     };
   },
   props: ["clickData"],
+  created() {
+    this.getSameScreenPrintData();
+  },
   mounted() {},
   watch: {
     clickData: {
@@ -441,17 +619,24 @@ export default {
         }
       },
       deep: true,
-      immediate: false
-    }
+      immediate: false,
+    },
   },
   methods: {
+    previewImg(data) {
+      this.previewVisible = true;
+      this.currentImg = this.baseUrl + data.file;
+    },
+    toggleExecuteMenu(item) {
+      this.executeBtnChecked = item.name;
+    },
     gotoView(fromData) {
       // 调用全局事件总线中的指定事件
       this.$bus.$emit("openMyView", [fromData.c_sjlbwt, fromData.c_bsjzwt]);
       this.dialogVisible = false;
       this.$store.commit("changeNavSelect", {
         index: "3",
-        name: "综合分析"
+        name: "综合分析",
       });
     },
     // 流程管理【实施】节点，根据id查看详情
@@ -464,8 +649,8 @@ export default {
           // 等值查询
           searchType: "1",
           content: {
-            value: val.desc
-          }
+            value: val.desc,
+          },
         };
         searchParam.push(paramTime);
       }
@@ -475,10 +660,10 @@ export default {
         states: "0,1,2,3",
         pageSize: 1,
         page: 0,
-        search: JSON.stringify(searchParam)
+        search: JSON.stringify(searchParam),
       };
 
-      this.$Post(this.urlsCollection.selectContentList, params).then(res => {
+      this.$Post(this.urlsCollection.selectContentList, params).then((res) => {
         if (res.code === 200 && res.content.data.length > 0) {
           this.formData = res.content.data[0];
           this.dialogVisible = true;
@@ -499,11 +684,14 @@ export default {
       // 判断流程明细是否存在文件，存在的话自动请求文件并渲染
       if (this.stepsList[this.stepsIndex - 1].info.filePath) {
         this.fileView = true;
-        this.$refs.filePreview.showView(this.stepsList[this.stepsIndex - 1].info.filePath);
+        this.$refs.filePreview.showView(
+          this.stepsList[this.stepsIndex - 1].info.filePath
+        );
       }
     },
     handleClose() {
       this.dialogVisible = false;
+      this.previewVisible = false;
     },
     // 查询事件
     getAllTasks() {
@@ -519,19 +707,19 @@ export default {
           field: "c_associated_item_ids",
           searchType: "2",
           content: {
-            value: this.clickData.id
-          }
+            value: this.clickData.id,
+          },
         };
         searchParam.push(param1);
       }
       params.append("search", JSON.stringify(searchParam));
       this.$Post(this.urlsCollection.selectContentList, params).then(
-        res => {
+        (res) => {
           if (res.code === 200 && res.content.data.length > 0) {
             this.tableData = res.content.data;
             if (this.tableData.length > 0) {
               let usersList = [];
-              this.tableData.forEach(item => {
+              this.tableData.forEach((item) => {
                 if (usersList.indexOf(item.author_id) < 0) {
                   usersList.push(item.author_id);
                   this.countUser++;
@@ -543,16 +731,46 @@ export default {
             this.countUser = 0;
           }
         },
-        error => {
+        (error) => {
           this.tableData = [];
           this.countUser = 0;
         }
       );
-    }
-  }
+    },
+    getSameScreenPrintData() {
+      let printedFiles = [];
+      let params = new FormData();
+      params.append("columnId", 1405);
+      params.append("states", "0,1,2,3");
+      params.append("pageSize", 30);
+      params.append("page", 0);
+      this.$Post(this.urlsCollection.selectContentList, params).then((res) => {
+        res.content.data.forEach((v) => {
+          printedFiles.push({
+            id: v.id,
+            // 目前存储的文件为图片格式
+            file: v.print_file,
+            time: v.c_print_time,
+            title: v.title,
+          });
+        });
+
+        // 步骤条列表增加打印记录数据
+
+        this.stepsList[3].info.executeFiles = printedFiles;
+        console.log(this.stepsList);
+      });
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
+.el-dialog__body {
+  .preview-box {
+    width: 100%;
+    height: 100%;
+  }
+}
 .StepsMyBox {
   padding: 0;
   position: absolute;
@@ -637,11 +855,58 @@ export default {
         margin: 40px;
         margin-top: 0px;
         font-size: 18px;
-        overflow-y: auto;
         // font-weight: bold;
+        overflow-y: auto;
         font-family: pingfangSC;
         line-height: 30px;
         color: #ffffff;
+        .btn-box {
+          height: 80px;
+          width: 400px;
+          display: flex;
+          align-items: top;
+          justify-content: space-around;
+          .button-style {
+            width: 150px;
+            height: 50px;
+            border-radius: 10px;
+            color: #fff;
+            font-weight: bold;
+            font-size: 18px;
+            border: 1px solid rgba(255, 255, 255, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            &.checked {
+              background: #4dc3ff;
+            }
+          }
+        }
+        .content {
+          width: 100%;
+          height: calc(100% - 80px);
+          overflow: auto;
+          &-item {
+            height: 40px;
+            width: 80%;
+            display: flex;
+            margin-bottom: 2px;
+            line-height: 40px;
+            .title {
+              width: 400px;
+              height: 40px;
+            }
+            .btn {
+              width: 150px;
+              height: 40px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+          }
+        }
+
         .flexBox {
           display: flex;
           width: 100%;