From 87f43c4b011b858edf3a82d37649de4e743803d6 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Fri, 14 Oct 2022 18:05:24 +0800
Subject: [PATCH] fix issue

---
 templates/base/head_navbar.tmpl               |  18 +-
 templates/base/head_navbar_fluid.tmpl         |  14 +
 templates/base/head_navbar_home.tmpl          |  14 +
 templates/base/head_navbar_pro.tmpl           |  14 +
 web_src/vuepages/pages/model/tuomin/index.vue | 605 +++++++++---------
 5 files changed, 370 insertions(+), 295 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index b13b3cc93..f9908f6f0 100755
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -32,10 +32,15 @@
 				</div>
 			</div>
 		</div>
-
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
-		<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">{{.i18n.Tr "repo.model_manager"}}</a>
+		<div class="ui simple dropdown item" >
+			{{.i18n.Tr "repo.model_manager"}}
+			<i class="dropdown icon"></i>
+			<div class="menu">
+				<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型体验</a>	
+			</div>
+		</div> 
 		<div class="ui simple dropdown item" id='dropdown_explore'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
@@ -69,7 +74,14 @@
 
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
-		<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">{{.i18n.Tr "repo.model_manager"}}</a>
+		<div class="ui simple dropdown item" >
+			{{.i18n.Tr "repo.model_manager"}}
+			<i class="dropdown icon"></i>
+			<div class="menu">
+				<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型体验</a>	
+			</div>
+		</div>
+		
 		<div class="ui simple dropdown item" id='dropdown_PageHome'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
diff --git a/templates/base/head_navbar_fluid.tmpl b/templates/base/head_navbar_fluid.tmpl
index 894cc74c2..010568e8d 100644
--- a/templates/base/head_navbar_fluid.tmpl
+++ b/templates/base/head_navbar_fluid.tmpl
@@ -34,6 +34,13 @@
 		</div>
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
+		<div class="ui simple dropdown item" >
+			{{.i18n.Tr "repo.model_manager"}}
+			<i class="dropdown icon"></i>
+			<div class="menu">
+				<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型体验</a>	
+			</div>
+		</div>
 		<div class="ui dropdown item" id='dropdown_explore'> 
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
@@ -66,6 +73,13 @@
 		</div>
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
+		<div class="ui simple dropdown item" >
+			{{.i18n.Tr "repo.model_manager"}}
+			<i class="dropdown icon"></i>
+			<div class="menu">
+				<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型体验</a>	
+			</div>
+		</div>
 		<div class="ui dropdown item" id='dropdown_PageHome'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
diff --git a/templates/base/head_navbar_home.tmpl b/templates/base/head_navbar_home.tmpl
index 3307654a6..1679bc872 100644
--- a/templates/base/head_navbar_home.tmpl
+++ b/templates/base/head_navbar_home.tmpl
@@ -26,6 +26,13 @@
 		</div>
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
+		<div class="ui simple dropdown item" >
+			{{.i18n.Tr "repo.model_manager"}}
+			<i class="dropdown icon"></i>
+			<div class="menu">
+				<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型体验</a>	
+			</div>
+		</div>
 		<div class="ui dropdown item" id='dropdown_explore'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
@@ -59,6 +66,13 @@
 
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
+		<div class="ui simple dropdown item" >
+			{{.i18n.Tr "repo.model_manager"}}
+			<i class="dropdown icon"></i>
+			<div class="menu">
+				<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型体验</a>	
+			</div>
+		</div>
 		<div class="ui dropdown item" id='dropdown_PageHome'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
diff --git a/templates/base/head_navbar_pro.tmpl b/templates/base/head_navbar_pro.tmpl
index 825040429..8f9ef8d9c 100644
--- a/templates/base/head_navbar_pro.tmpl
+++ b/templates/base/head_navbar_pro.tmpl
@@ -36,6 +36,13 @@
 
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
+		<div class="ui simple dropdown item" >
+			{{.i18n.Tr "repo.model_manager"}}
+			<i class="dropdown icon"></i>
+			<div class="menu">
+				<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型体验</a>	
+			</div>
+		</div>
 		<div class="ui dropdown item" id='dropdown_explore'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
@@ -69,6 +76,13 @@
 
 		<a class="item" href="{{AppSubUrl}}/explore/repos">{{.i18n.Tr "custom.head.project"}}</a>
 		<a class="item" href="{{AppSubUrl}}/explore/datasets">{{.i18n.Tr "custom.head.dataset"}}</a>
+		<div class="ui simple dropdown item" >
+			{{.i18n.Tr "repo.model_manager"}}
+			<i class="dropdown icon"></i>
+			<div class="menu">
+				<a class="item" href="{{AppSubUrl}}/extension/tuomin/upload">模型体验</a>	
+			</div>
+		</div>
 		<div class="ui dropdown item" id='dropdown_PageHome'>
 			{{.i18n.Tr "explore"}}
 			<i class="dropdown icon"></i>
diff --git a/web_src/vuepages/pages/model/tuomin/index.vue b/web_src/vuepages/pages/model/tuomin/index.vue
index 7ba55165c..e5396de2b 100644
--- a/web_src/vuepages/pages/model/tuomin/index.vue
+++ b/web_src/vuepages/pages/model/tuomin/index.vue
@@ -1,322 +1,343 @@
 <template>
-    <div class="ui container">
-      <div class="tuomin-title">
-        <h2>{{$t('dataDesensitizationModelExperience')}}</h2>
-        <p>{{$t('dataDesensitizationModelDesc')}} &nbsp;<a href="https://git.openi.org.cn/tengxiao/tuomin" target="_blank">tengxiao / tuomin</a></p>
-      </div>
-      <el-row :gutter="12" style="margin-top: 33px;">
-        <el-col :xs="24" :span="12">
-          <div class="tuomin-content-image">
-              <div class="tuomin-icon">
-                <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
-                <span style="font-size: 12px;">img</span>
+  <div class="ui container">
+    <div class="tuomin-title">
+      <h2>{{ $t("dataDesensitizationModelExperience") }}</h2>
+      <p>
+        {{ $t("dataDesensitizationModelDesc") }} &nbsp;<a
+          href="https://git.openi.org.cn/tengxiao/tuomin"
+          target="_blank"
+          >tengxiao / tuomin</a
+        >
+      </p>
+    </div>
+    <el-row :gutter="12" style="margin-top: 33px">
+      <el-col :xs="24" :span="12">
+        <div class="tuomin-content-image">
+          <div class="tuomin-icon">
+            <i
+              class="ri-image-line"
+              style="font-size: 16px; margin-right: 2px"
+            ></i>
+            <span style="font-size: 12px">img</span>
+          </div>
+          <div style="height: 230px; width: 96%; margin: 0 auto">
+            <el-upload
+              action="#"
+              accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
+              :show-file-list="false"
+              :on-change="handleChangePicture"
+              list-type="picture-card"
+              :file-list="fileList"
+              :style="{ display: ImageUrl ? 'none' : 'block' }"
+              :auto-upload="false"
+              drag
+            >
+              <div class="el-upload__text">
+                {{ $t("dragThePictureHere")
+                }}<span style="color: rgba(136, 136, 136, 0.87)">{{
+                  $t("or")
+                }}</span
+                >{{ $t("clickUpload") }}
               </div>
-              <div style="height:230px;width: 96%;margin: 0 auto;">
-                <el-upload 
-                  action="#" 
-                  accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
-                  :show-file-list="false" 
-                  :on-change="handleChangePicture"
-                  list-type="picture-card"
-                  :file-list="fileList"
-                  :style="{display:(ImageUrl ? 'none':'block')}"
-                  :auto-upload="false"
-                  >
-                    <div class="el-upload__text">{{$t('dragThePictureHere')}}<span style="color: rgba(136, 136, 136, 0.87);">{{$t('or')}}</span>{{$t('clickUpload')}}</div>
-                </el-upload>
+            </el-upload>
 
-                <img class="preview-image" v-if="ImageUrl" :src="ImageUrl" alt="">
-              </div>
+            <img class="preview-image" v-if="ImageUrl" :src="ImageUrl" alt="" />
+          </div>
+          <div>
+            <div class="tuomin-radio-model">
+              <label class="radio-label"
+                >{{ $t("desensitizationObject") }}：</label
+              >
               <div>
-                  <div class="tuomin-radio-model">
-                    <label class="radio-label">{{$t('desensitizationObject')}}：</label>
-                    <div>
-                      <el-radio-group v-model="radio">
-                        <el-radio :label="2">{{$t('all')}}</el-radio>
-                        <el-radio :label="1">{{$t('onlyFace')}}</el-radio>
-                        <el-radio :label="0">{{$t('onlyLicensePlate')}}</el-radio>
-                      </el-radio-group>
-                    </div>
-                    
-                  </div>
-                  <div class="tuomin-button-model">
-                    <el-button @click="cancelUpload">{{$t('cancel')}}</el-button>
-                    <el-button :disabled="fileList.length<1" @click="startTranform" type="primary">{{$t('startDesensitization')}}</el-button>
-                  </div>
+                <el-radio-group v-model="radio">
+                  <el-radio :label="2">{{ $t("all") }}</el-radio>
+                  <el-radio :label="1">{{ $t("onlyFace") }}</el-radio>
+                  <el-radio :label="0">{{ $t("onlyLicensePlate") }}</el-radio>
+                </el-radio-group>
               </div>
-          </div>
-        </el-col>
-        <el-col :xs="24" :span="12">
-          <div class="tuomin-content-image" v-loading="tranformImageLoading">
-            <div class="tuomin-icon">
-              <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
-              <span style="font-size: 12px;">output</span>
             </div>
-            <div style="height: 358px;">
-              <el-image 
-                 style="height: 100%;width: 100%;"
-                :src="resultImgSrc" 
-                :preview-src-list="[resultImgSrc]">
-                <div slot="error" class="image-slot">
-                  <i style="font-size: 0;" class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
-              
+            <div class="tuomin-button-model">
+              <el-button @click="cancelUpload">{{ $t("cancel") }}</el-button>
+              <el-button
+                :disabled="fileList.length < 1"
+                @click="startTranform"
+                type="primary"
+                >{{ $t("startDesensitization") }}</el-button
+              >
             </div>
           </div>
-        </el-col>
-      </el-row>
-      
-      <div style="margin: 39px 0 21px 0;">
-        <span>{{$t('example')}}：</span>
-      </div>
-      
-      <div class="table-container">
-        <div>
-          <el-table border  :data="tableData1" style="width:100%">
-            <el-table-column :label="$t('originPicture')" align="center">
-              <template slot-scope="scope">
-                <div style="width: 100%;height:200px;">
-                  <el-image 
-                    style="height: 100%;width: 100%;"
-                    :src="scope.row.imgSrc1" 
-                    :preview-src-list="[scope.row.imgSrc1]">
-                    <div slot="error" class="image-slot">
-                      <i style="font-size: 0;" class="el-icon-picture-outline"></i>
-                    </div>
-                  </el-image>
-                  
-                </div>
-                
-                
-              </template>
-            </el-table-column>
-            <el-table-column :label="$t('desensitizationPicture')" align="center">
-              <template slot-scope="scope">
-                <div style="width: 100%;height:200px;">
-                  <el-image 
-                    style="height: 100%;width: 100%;"
-                    :src="scope.row.imgSrc2" 
-                    :preview-src-list="[scope.row.imgSrc2]">
-                    <div slot="error" class="image-slot">
-                      <i style="font-size: 0;" class="el-icon-picture-outline"></i>
-                    </div>
-                  </el-image>
-                  
-                </div>
-                
-              </template>
-            </el-table-column>
-            <el-table-column prop="mode" :label="$t('desensitizationObject')" align="center" header-align="center">
-            </el-table-column>
-
-          </el-table>
         </div>
-        
+      </el-col>
+      <el-col :xs="24" :span="12">
+        <div class="tuomin-content-image" v-loading="tranformImageLoading">
+          <div class="tuomin-icon">
+            <i
+              class="ri-image-line"
+              style="font-size: 16px; margin-right: 2px"
+            ></i>
+            <span style="font-size: 12px">output</span>
+          </div>
+          <div style="height: 358px">
+            <el-image
+              style="height: 100%; width: 100%"
+              :src="resultImgSrc"
+              :preview-src-list="[resultImgSrc]"
+            >
+              <div slot="error" class="image-slot">
+                <i style="font-size: 0" class="el-icon-picture-outline"></i>
+              </div>
+            </el-image>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <div style="margin: 39px 0 21px 0">
+      <span>{{ $t("example") }}：</span>
+    </div>
+
+    <div class="table-container">
+      <div>
+        <el-table border :data="tableData1" style="width: 100%">
+          <el-table-column :label="$t('originPicture')" align="center">
+            <template slot-scope="scope">
+              <div style="width: 100%; height: 200px">
+                <el-image
+                  style="height: 100%; width: 100%"
+                  :src="scope.row.imgSrc1"
+                  :preview-src-list="[scope.row.imgSrc1]"
+                >
+                  <div slot="error" class="image-slot">
+                    <i style="font-size: 0" class="el-icon-picture-outline"></i>
+                  </div>
+                </el-image>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('desensitizationPicture')" align="center">
+            <template slot-scope="scope">
+              <div style="width: 100%; height: 200px">
+                <el-image
+                  style="height: 100%; width: 100%"
+                  :src="scope.row.imgSrc2"
+                  :preview-src-list="[scope.row.imgSrc2]"
+                >
+                  <div slot="error" class="image-slot">
+                    <i style="font-size: 0" class="el-icon-picture-outline"></i>
+                  </div>
+                </el-image>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="mode"
+            :label="$t('desensitizationObject')"
+            align="center"
+            header-align="center"
+          >
+          </el-table-column>
+        </el-table>
       </div>
     </div>
-  </template>
-  
-  <script>
-  import axios from 'axios';
-  
-  export default {
-    data() {
-      return {
-        ImageUrl:'',
-        radio:2,
-        file:'',
-        fileList:[],
-        resultImgSrc:'',
-        tranformImageLoading:false,
-        tableData1:[{
-          imgSrc1:'/img/origin.png',
-          imgSrc2:'/img/tuomin.png',
-          mode:this.$t('all')
-        }]
-      };
-    },
-    components: {},
-    methods: {
-      // 选择文件、移除文件、上传文件成功/失败后，都会触发
-      handleChangePicture(file,fileList) {
-        console.log("----change:",file,fileList)
-        let acceptList = ["jpg", "jpeg",'png']
-        // 根据文件名获取文件的后缀名
-        let fileType = file.name.split('.').pop().toLowerCase()
-        // 判断文件格式是否符合要求
-        if (acceptList.indexOf(fileType) === -1) {
-            this.$message.error(this.$t('limitFilesUpload'));
-            return false
-        }
-        // 判断文件大小是否符合要求
-        if (file.size / 1024 / 1024 > 20) {
-            this.$message.error(this.$t('limitSizeUpload'));
-            return false
-        }
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      ImageUrl: "",
+      radio: 2,
+      file: "",
+      fileList: [],
+      resultImgSrc: "",
+      tranformImageLoading: false,
+      tableData1: [
+        {
+          imgSrc1: "/img/origin.png",
+          imgSrc2: "/img/tuomin.png",
+          mode: this.$t("all"),
+        },
+      ],
+    };
+  },
+  components: {},
+  methods: {
+    // 选择文件、移除文件、上传文件成功/失败后，都会触发
+    handleChangePicture(file, fileList) {
+      let acceptList = ["jpg", "jpeg", "png"];
+      // 根据文件名获取文件的后缀名
+      let fileType = file.name.split(".").pop().toLowerCase();
+      // 判断文件格式是否符合要求
+      if (acceptList.indexOf(fileType) === -1) {
+        this.$message.error(this.$t("limitFilesUpload"));
+        return false;
+      }
+      // 判断文件大小是否符合要求
+      if (file.size / 1024 / 1024 > 20) {
+        this.$message.error(this.$t("limitSizeUpload"));
+        return false;
+      }
 
-        this.ImageUrl = URL.createObjectURL(file.raw);
-        this.file = file
-        this.fileList = fileList
-      },
-      cancelUpload(){
-        this.ImageUrl = ''
-        this.file=''
-        this.fileList = []
-      },
-      startTranform(){
-        if(!this.file)return
-        let fd = new FormData();
-        fd.append('file', this.file.raw);
-        console.log(fd.get("file"))
-        this.tranformImageLoading = true
-        axios({
-          method:'POST',
-          url: '/extension/tuomin/upload',
-          headers: {'Accept': 'image/png'},
-          responseType: 'blob',
-          params: { mode: this.radio },
-          data:fd
-        }).then(res => {
-          console.log(res)
+      this.ImageUrl = URL.createObjectURL(file.raw);
+      this.file = file;
+      this.fileList = fileList;
+    },
+    cancelUpload() {
+      this.ImageUrl = "";
+      this.file = "";
+      this.fileList = [];
+    },
+    startTranform() {
+      if (!this.file) return;
+      let fd = new FormData();
+      fd.append("file", this.file.raw);
+      this.tranformImageLoading = true;
+      axios({
+        method: "POST",
+        url: "/extension/tuomin/upload",
+        headers: { Accept: "image/png" },
+        responseType: "blob",
+        params: { mode: this.radio },
+        data: fd,
+      })
+        .then((res) => {
           const objectURL = URL.createObjectURL(res.data);
           this.resultImgSrc = objectURL;
-          this.tranformImageLoading = false
-        }).catch(err => {
-          console.log(err);
-
+          this.tranformImageLoading = false;
+        })
+        .catch((err) => {
           this.tranformImageLoading = false;
           if (err.response.status === 400) {
-               const fr = new FileReader();
-               fr.onload = (e) => {
-                 try {
-                   const jsonResult = JSON.parse(e.target.result);
-                   this.$message({
-                     type: 'error',
-                     message: jsonResult.Message
-                   });
-                 } catch (e) {
-                   this.$message({
-                     type: 'error',
-                     message: this.$t('tranformImageFailed')
-                   });
-                 }
-               };
-               fr.readAsText(err.response.data);
-          }else{
-
-          this.$message({
-            type: 'error',
-            message: this.$t('tranformImageFailed')
-          });
+            const fr = new FileReader();
+            fr.onload = (e) => {
+              try {
+                const jsonResult = JSON.parse(e.target.result);
+                this.$message({
+                  type: "error",
+                  message: jsonResult.Message,
+                });
+              } catch (e) {
+                this.$message({
+                  type: "error",
+                  message: this.$t("tranformImageFailed"),
+                });
+              }
+            };
+            fr.readAsText(err.response.data);
+          } else {
+            this.$message({
+              type: "error",
+              message: this.$t("tranformImageFailed"),
+            });
           }
-        })
-
-      },
-
-      
+        });
     },
-    mounted() {
+  },
+  mounted() {},
+  beforeDestroy() {},
+};
+</script>
 
-    },
-    beforeDestroy() {
-    },
-  };
-  </script>
-  
-  <style scoped lang="less">
-  .tuomin-title{
-    margin-top: 34px;
-    h2 {
-      display: flex;
-      justify-content: center;
-    }
-    p{
-      display: flex;
-      justify-content: center;
-      color: rgba(136, 136, 136, 0.87);
-    }
+<style scoped lang="less">
+.tuomin-title {
+  margin-top: 34px;
+  h2 {
+    display: flex;
+    justify-content: center;
   }
-  .tuomin-content-image{
+  p {
+    display: flex;
+    justify-content: center;
+    color: rgba(136, 136, 136, 0.87);
+  }
+}
+.tuomin-content-image {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  min-height: 358px;
+  position: relative;
+  .tuomin-icon {
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 66px;
+    height: 22px;
+    justify-content: center;
+    color: rgba(136, 136, 136, 0.87);
+    border-radius: 5px 0px 10px 0px;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    min-height: 358px;
-    position: relative;
-    .tuomin-icon {
-      display: flex;
-      align-items: center;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 66px;
-      height: 22px;
-      justify-content: center;
-      color: rgba(136, 136, 136, 0.87);
-      border-radius: 5px 0px 10px 0px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-    }
-    .el-upload__text{
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .preview-image{
-      height: 100%;
-      width: 100%;
-    }
-    .tuomin-radio-model{
-      display: flex;
-      margin: 25px 12px 0 12px;
-      .radio-label{
-        font-weight: 600;
-        margin-right: 4px;
-        color: rgba(16, 16, 16, 1);
-      }
-    }
-    .tuomin-button-model{
-      text-align: right;
-      margin: 22px 12px 0 12px;
-
-    }
   }
-  /deep/ .el-upload--picture-card{
+  .el-upload__text {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .preview-image {
+    height: 100%;
     width: 100%;
-    background: #ffff;
-    border: none;
-    border-bottom: 1px dashed #888;
-    border-radius: 0;
-    min-height: 230px;
   }
-  
-  .table-container {
-    margin-bottom: 16px;
-  
-    /deep/ .el-table__header {
-      th {
-        background: rgb(245, 245, 246);
-        font-size: 14px;
-        color: rgb(36, 36, 36);
-        font-weight: 400;
-      }
+  .tuomin-radio-model {
+    display: flex;
+    margin: 25px 12px 0 12px;
+    .radio-label {
+      font-weight: 600;
+      margin-right: 4px;
+      color: rgba(16, 16, 16, 1);
     }
-  
-    /deep/ .el-table__body {
-      td {
-        font-size: 14px;
-      }
+  }
+  .tuomin-button-model {
+    text-align: right;
+    margin: 22px 12px 0 12px;
+  }
+}
+/deep/ .el-upload--picture-card {
+  width: 100%;
+  background: #ffff;
+  border: none;
+  border-bottom: 1px dashed #888;
+  border-radius: 0;
+  min-height: 230px;
+}
+/deep/ .el-upload-dragger {
+  width: 100%;
+  background: #ffff;
+  border: none;
+  border-radius: 0;
+  height: 100%;
+}
+.table-container {
+  margin-bottom: 16px;
+
+  /deep/ .el-table__header {
+    th {
+      background: rgb(245, 245, 246);
+      font-size: 14px;
+      color: rgb(36, 36, 36);
+      font-weight: 400;
     }
-  
   }
-  .center {
-    display: flex;
-    justify-content: center;
+
+  /deep/ .el-table__body {
+    td {
+      font-size: 14px;
+    }
   }
+}
+.center {
+  display: flex;
+  justify-content: center;
+}
 
-  @media screen and (max-width:768px){
-      body{
-          background-color: black
-      }
+@media screen and (max-width: 768px) {
+  body {
+    background-color: black;
   }
-  </style>
-  
\ No newline at end of file
+}
+</style>