2022/1/21 系统设置主题管理

minggao/src/page/systemmanger/motif.vue

@@ -1,25 +1,157 @@
 <!--  -->
 <template>
-  <div class="">主题管理</div>
+  <div class="motif_box">
+    <el-card :style="'height:' + fullHeight + 'px'">
+      <ul class="motif_ul">
+        <li class="motif_list">
+          <div class="list_left">系统LOGO:</div>
+          <div class="list_right">
+            <img src="../../assets/images/newImg/12.jpg" alt="" class="" />
+          </div>
+        </li>
+        <li class="motif_list">
+          <div class="list_left">系统名称:</div>
+          <div class="list_right">有害生物监测预警及指挥平台</div>
+        </li>
+        <li class="motif_list">
+          <div class="list_left">版权信息:</div>
+          <div class="list_right">
+            Copyright©2007-2019 All Rrights
+            Resvered　版权所有：河南云飞科技发展有限公司
+          </div>
+        </li>
+        <li>
+          <el-button size="mini" type="primary" style="margin: 10px 0 0 100px"
+            >编辑</el-button
+          >
+        </li>
+      </ul>
+    </el-card>
+
+    <!-- 编辑弹框 -->
+    <el-dialog
+      title="编辑"
+      :visible.sync="redactVisible"
+      width="50%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+        <el-form-item label="系统LOGO:" prop="img">
+          <el-upload
+            class="avatar-uploader"
+            ref="upload"
+            :http-request="ImgUploadSectionFile"
+            :with-credentials="true"
+            :auto-upload="false"
+            accept=".png, .jpg, .gif, .svg"
+            action
+            :on-change="handleChange"
+            list-type="list"
+            :file-list="fileList"
+            multiple
+            :show-file-list="false"
+          >
+            <img
+              v-if="userDetail.role_logo"
+              :src="userDetail.role_logo"
+              class="avatar"
+            />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="系统名称: " prop="name">
+          <el-input
+            style="width: 80%"
+            size="mini"
+            v-model="form.name"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="版权信息: " prop="describe">
+          <el-input
+            style="width: 80%"
+            size="mini"
+            type="textarea"
+            resize="none"
+            v-model="form.describe"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" type="primary"
+            >确定</el-button
+          >
+          <el-button size="small" @click="redactVisible = false"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
-
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      fullHeight: document.documentElement.clientHeight - 116, //
+      redactVisible: true,
+      form: {
+        img: "",
+        name: "",
+        describe: "",
+      },
+      rules: {
+        img: [{ required: true, message: "请输入系统名称", trigger: "blur" }],
+        name: [{ required: true, message: "请输入系统名称", trigger: "blur" }],
+        describe: [
+          { required: true, message: "请输入版本信息", trigger: "blur" },
+        ],
+      },
+
+      // 上传图片
+      fileList: [],
+      userDetail: {},
+    };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    fullHeight(val) {
+      //监控浏览器高度变化
+      if (!this.timer) {
+        this.fullHeight = val;
+        this.timer = true;
+        let that = this;
+        setTimeout(function () {
+          //防止过度调用监测事件，导致卡顿
+          that.timer = false;
+        }, 400);
+      }
+    },
+  },
   //方法集合
-  methods: {},
+  methods: {
+    //动态获取浏览器高度
+    get_boderHeight() {
+      const that = this;
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.fullHeight = window.fullHeight;
+        })();
+      };
+    },
+
+    // 上传图片
+    ImgUploadSectionFile() {},
+    handleChange() {},
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -34,5 +166,30 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
+// .motif_box {
+
+// }
+
+.motif_ul {
+  .motif_list {
+    display: flex;
+    .list_left {
+      width: 80px;
+      text-align: right;
+      font-size: 14px;
+      color: #333333;
+      font-weight: 400;
+    }
+    .list_right {
+      width: 300px;
+      margin: 0 0 30px 20px;
+      font-size: 14px;
+      img {
+        width: 150px;
+        height: 150px;
+        border-radius: 5px;
+      }
+    }
+  }
+}
 </style>