YY 3 éve
szülő
commit
2659e86eb3

+ 107 - 0
src/views/adminCenter/adminAgent/detail.vue

@@ -0,0 +1,107 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col class="one">
+          <el-button type="primary" size="mini" @click="toReturn()">返回</el-button>
+          <span class="sp">代理机构-信息管理</span>
+        </el-col>
+        <el-col class="two">
+          <el-form :model="form" :rules="rules" ref="form" label-width="140px">
+            <el-form-item label="管理员" prop="name1">
+              <el-select v-model="form.name1" clearable filterable placeholder="请选择" style="width: 100%" size="small">
+                <el-option v-for="item in name1List" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="机构代码或邀请码" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="机构名称" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="姓名" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="手机号" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="btn" type="primary" size="mini" @click="onSubmit('form')">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      rules: {
+        title: [{ required: true, message: '请输入', trigger: 'blur' }],
+        // title: [{ required: true, message: '机构代码或邀请码', trigger: 'blur' }],
+        // title: [{ required: true, message: '机构名称', trigger: 'blur' }],
+        // title: [{ required: true, message: '姓名', trigger: 'blur' }],
+        // title: [{ required: true, message: '手机号', trigger: 'blur' }],
+        // title: [{ required: true, message: '密码', trigger: 'blur' }],
+      },
+      form: {},
+      // 名称
+      name1List: [{ value: '0', label: '吉林专利市场系统管理员' }],
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('onSubmit', { data: this.form });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    //返回
+    toReturn() {
+      this.$router.push({ path: '/adminCenter/adminAgent/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    padding: 0 0 20px 10px;
+    .sp {
+      padding: 0px 0 0 170px;
+      font-size: 24px;
+      font-weight: 700;
+      margin-right: 10px;
+    }
+  }
+}
+</style>

+ 54 - 5
src/views/adminCenter/adminAgent/index.vue

@@ -1,7 +1,19 @@
 <template>
 <template>
   <div id="index">
   <div id="index">
     <el-row>
     <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight"> test </el-col>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <el-col class="one">
+          <span>代理机构</span>
+        </el-col>
+        <el-col class="two"> </el-col>
+        <el-col :span="24" class="thr">
+          <data-table :fields="fields" :opera="opera" :data="list" @query="search" :total="total" @edit="toEdit" @del="toDel">
+            <template slot="selfbtn">
+              <el-button type="primary" size="mini" @click="toAdd()">添加用户</el-button>
+            </template>
+          </data-table>
+        </el-col>
+      </el-col>
     </el-row>
     </el-row>
   </div>
   </div>
 </template>
 </template>
@@ -13,10 +25,38 @@ export default {
   props: {},
   props: {},
   components: {},
   components: {},
   data: function () {
   data: function () {
-    return {};
+    return {
+      //列头配置项
+      fields: [
+        { label: '名称', prop: 'name', filter: true },
+        { label: '机构名称', prop: 'name', filter: true },
+        { label: '联系电话', prop: 'name', filter: true },
+      ],
+      // 操作
+      opera: [
+        { label: '修改/审核', method: 'edit' },
+        { label: '删除', method: 'del', confirm: true, type: 'danger' },
+      ],
+      list: [],
+      total: 0,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    async search({ skip = 0, limit = 10, ...info } = {}) {},
+    // 添加用户
+    toAdd() {
+      this.$router.push({ path: '/adminCenter/adminAgent/detail' });
+    },
+    // 修改
+    toEdit({ data }) {},
+    // 刪除
+    toDel({ data }) {
+      console.log(data);
+    },
   },
   },
-  created() {},
-  methods: {},
   computed: {
   computed: {
     ...mapState(['user']),
     ...mapState(['user']),
   },
   },
@@ -33,4 +73,13 @@ export default {
 };
 };
 </script>
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .one {
+    padding: 20px 0 20px 0px;
+    font-size: 26px;
+    font-weight: 700;
+    margin-right: 10px;
+  }
+}
+</style>

+ 123 - 0
src/views/adminCenter/adminTea/detail.vue

@@ -0,0 +1,123 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col class="one">
+          <el-button type="primary" size="mini" @click="toReturn()">返回</el-button>
+          <span class="sp">咨询师-信息管理</span>
+        </el-col>
+        <el-col class="two">
+          <el-form :model="form" :rules="rules" ref="form" label-width="140px">
+            <el-form-item label="用户类型" prop="name1">
+              <el-radio v-model="radio" label="1">咨询师</el-radio>
+              <el-radio v-model="radio" label="2">代理师</el-radio>
+              <el-radio v-model="radio" label="3">分析师</el-radio>
+            </el-form-item>
+            <el-form-item label="姓名" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="手机号" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="登录密码" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="身份证号" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="电子邮箱" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="联系地址" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="职位职称" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="院校" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="专业" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="办公电话" prop="title">
+              <el-input v-model="form.title" placeholder="请输入" size="small"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="btn" type="primary" size="mini" @click="onSubmit('form')">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      rules: {
+        title: [{ required: true, message: '请输入', trigger: 'blur' }],
+        // title: [{ required: true, message: '机构代码或邀请码', trigger: 'blur' }],
+        // title: [{ required: true, message: '机构名称', trigger: 'blur' }],
+        // title: [{ required: true, message: '姓名', trigger: 'blur' }],
+        // title: [{ required: true, message: '手机号', trigger: 'blur' }],
+        // title: [{ required: true, message: '密码', trigger: 'blur' }],
+      },
+      radio: '',
+      form: {},
+      // 名称
+      name1List: [{ value: '0', label: '吉林专利市场系统管理员' }],
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('onSubmit', { data: this.form });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    //返回
+    toReturn() {
+      this.$router.push({ path: '/adminCenter/adminTea/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    padding: 0 0 20px 10px;
+    .sp {
+      padding: 0px 0 0 170px;
+      font-size: 24px;
+      font-weight: 700;
+      margin-right: 10px;
+    }
+  }
+}
+</style>

+ 54 - 5
src/views/adminCenter/adminTea/index.vue

@@ -1,7 +1,19 @@
 <template>
 <template>
   <div id="index">
   <div id="index">
     <el-row>
     <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight"> test </el-col>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <el-col class="one">
+          <span>咨询师</span>
+        </el-col>
+        <el-col class="two"> </el-col>
+        <el-col :span="24" class="thr">
+          <data-table :fields="fields" :opera="opera" :data="list" @query="search" :total="total" @edit="toEdit" @del="toDel">
+            <template slot="selfbtn">
+              <el-button type="primary" size="mini" @click="toAdd()">添加用户</el-button>
+            </template>
+          </data-table>
+        </el-col>
+      </el-col>
     </el-row>
     </el-row>
   </div>
   </div>
 </template>
 </template>
@@ -13,10 +25,38 @@ export default {
   props: {},
   props: {},
   components: {},
   components: {},
   data: function () {
   data: function () {
-    return {};
+    return {
+      //列头配置项
+      fields: [
+        { label: '姓名', prop: 'name', filter: true },
+        { label: '用户类型', prop: 'name', filter: true },
+        { label: '联系电话', prop: 'name', filter: true },
+      ],
+      // 操作
+      opera: [
+        { label: '修改/审核', method: 'edit' },
+        { label: '删除', method: 'del', confirm: true, type: 'danger' },
+      ],
+      list: [],
+      total: 0,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    async search({ skip = 0, limit = 10, ...info } = {}) {},
+    // 添加用户
+    toAdd() {
+      this.$router.push({ path: '/adminCenter/adminTea/detail' });
+    },
+    // 修改
+    toEdit({ data }) {},
+    // 刪除
+    toDel({ data }) {
+      console.log(data);
+    },
   },
   },
-  created() {},
-  methods: {},
   computed: {
   computed: {
     ...mapState(['user']),
     ...mapState(['user']),
   },
   },
@@ -33,4 +73,13 @@ export default {
 };
 };
 </script>
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .one {
+    padding: 20px 0 20px 0px;
+    font-size: 26px;
+    font-weight: 700;
+    margin-right: 10px;
+  }
+}
+</style>

+ 133 - 0
src/views/adminCenter/adminUser/detail.vue

@@ -0,0 +1,133 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col class="one">
+          <el-button type="primary" size="mini" @click="toReturn()">返回</el-button>
+          <span class="sp">平台用户-信息管理</span>
+        </el-col>
+        <el-col class="two">
+          <el-form :model="form" :rules="rules" ref="form" label-width="140px">
+            <el-form-item label="邀请码" prop="name1">
+              <el-select v-model="form.name1" clearable filterable placeholder="请选择" style="width: 100%" size="small">
+                <el-option v-for="item in name1List" :key="item._id" :label="item._id" :value="item.name"> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="机构代码或邀请码" prop="title">
+              <el-input v-model="form.title" placeholder="请输入机构代码或邀请码" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="姓名" prop="title">
+              <el-input v-model="form.title" placeholder="请输入姓名" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="手机号" prop="title">
+              <el-input v-model="form.title" placeholder="请输入手机号" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="登录密码" prop="title">
+              <el-input v-model="form.title" placeholder="请输入登录密码" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="身份证号" prop="title">
+              <el-input v-model="form.title" placeholder="请输入身份证号" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="电子邮箱" prop="title">
+              <el-input v-model="form.title" placeholder="请输入电子邮箱" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="联系地址" prop="title">
+              <el-input v-model="form.title" placeholder="请输入联系地址" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="职务职称" prop="title">
+              <el-input v-model="form.title" placeholder="请输入职务职称" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="院校" prop="title">
+              <el-input v-model="form.title" placeholder="请输入院校" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="专业" prop="title">
+              <el-input v-model="form.title" placeholder="请输入专业" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="所属辖区" prop="name2">
+              <el-select v-model="form.name2" clearable filterable placeholder="请选择" style="width: 100%" size="small">
+                <el-option v-for="item in name2List" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="审核状态" prop="name1">
+              <el-radio v-model="radio" label="1">待审</el-radio>
+              <el-radio v-model="radio" label="2">通过</el-radio>
+              <el-radio v-model="radio" label="3">拒绝</el-radio>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="btn" type="primary" size="mini" @click="onSubmit('form')">提交保存</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      rules: {
+        title: [{ required: true, message: '请输入', trigger: 'blur' }],
+        // title: [{ required: true, message: '机构代码或邀请码', trigger: 'blur' }],
+        // title: [{ required: true, message: '机构名称', trigger: 'blur' }],
+        // title: [{ required: true, message: '姓名', trigger: 'blur' }],
+        // title: [{ required: true, message: '手机号', trigger: 'blur' }],
+        // title: [{ required: true, message: '密码', trigger: 'blur' }],
+      },
+      form: {},
+      radio: '',
+      // 名称
+      name1List: [{ value: '0', label: '吉林专利市场系统管理员' }],
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('onSubmit', { data: this.form });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    //返回
+    toReturn() {
+      this.$router.push({ path: '/adminCenter/adminUser/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    padding: 0 0 20px 10px;
+    .sp {
+      padding: 0px 0 0 170px;
+      font-size: 24px;
+      font-weight: 700;
+      margin-right: 10px;
+    }
+  }
+}
+</style>

+ 70 - 5
src/views/adminCenter/adminUser/index.vue

@@ -1,7 +1,21 @@
 <template>
 <template>
   <div id="index">
   <div id="index">
     <el-row>
     <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight"> test </el-col>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <el-col class="one">
+          <span>平台用户</span>
+        </el-col>
+        <el-col class="two"> </el-col>
+        <el-col :span="24" class="thr">
+          <data-table :fields="fields" :opera="opera" :data="list" @query="search" :total="total" @edit="toEdit" @del="toDel" @reset="toReset">
+            <template slot="selfbtn">
+              <el-button type="primary" size="mini" @click="toAdd()">添加用户</el-button>
+              <el-button type="primary" size="mini" @click="toLogin()">批量注册用户</el-button>
+              <el-button type="primary" size="mini" @click="toExpert()">批量导出用户</el-button>
+            </template>
+          </data-table>
+        </el-col>
+      </el-col>
     </el-row>
     </el-row>
   </div>
   </div>
 </template>
 </template>
@@ -13,10 +27,52 @@ export default {
   props: {},
   props: {},
   components: {},
   components: {},
   data: function () {
   data: function () {
-    return {};
+    return {
+      //列头配置项
+      fields: [
+        { label: '名称', prop: 'name', filter: true },
+        { label: '机构代码或邀请码', prop: 'name', filter: true },
+        { label: '联系电话', prop: 'name', filter: true },
+        { label: '审核状态', prop: 'name', filter: true },
+      ],
+      // 操作
+      opera: [
+        { label: '修改/审核', method: 'edit' },
+        { label: '删除', method: 'del', confirm: true, type: 'danger' },
+        { label: '重置', method: 'reset' },
+      ],
+      list: [],
+      total: 0,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    async search({ skip = 0, limit = 10, ...info } = {}) {},
+    // 添加用户
+    toAdd() {
+      this.$router.push({ path: '/adminCenter/adminUser/detail' });
+    },
+    // 批量注册用户
+    toLogin() {
+      this.$router.push({ path: '/adminCenter/adminUser/register' });
+    },
+    // 修改
+    toEdit({ data }) {},
+    // 刪除
+    toDel({ data }) {
+      console.log(data);
+    },
+    //重置
+    toReset({ data }) {
+      console.log(data);
+    },
+    // 导出所有数据
+    toExport() {
+      console.log();
+    },
   },
   },
-  created() {},
-  methods: {},
   computed: {
   computed: {
     ...mapState(['user']),
     ...mapState(['user']),
   },
   },
@@ -33,4 +89,13 @@ export default {
 };
 };
 </script>
 </script>
 
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .one {
+    padding: 20px 0 20px 0px;
+    font-size: 26px;
+    font-weight: 700;
+    margin-right: 10px;
+  }
+}
+</style>

+ 145 - 0
src/views/adminCenter/adminUser/register.vue

@@ -0,0 +1,145 @@
+<template>
+  <div id="register">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col class="one">
+          <el-button type="primary" size="mini" @click="toReturn()">返回</el-button>
+          <span class="sp">平台用户-批量注册用户</span>
+        </el-col>
+        <el-col class="two">
+          <el-button type="primary" size="mini">数据模板下载</el-button>
+        </el-col>
+        <el-col class="thr">
+          <el-col :span="2" class="thr_1"> <span>文件</span></el-col>
+          <!-- <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+            <el-form-item label="附件" prop="file">
+              <s-upload :limit="2" :data="form.file" type="file" :url="uri" @upload="uplSuc" @delete="uplDel"></s-upload>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="onSubmit('form')">确定</el-button>
+              <el-button type="danger" size="mini" @click="toReset('form')">取消</el-button>
+            </el-form-item>
+          </el-form> -->
+          <el-col :span="20">
+            <el-upload action="#" list-type="picture-card" :auto-upload="false">
+              <i slot="default" class="el-icon-plus"></i>
+              <div slot="file" slot-scope="{ file }">
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                <span class="el-upload-list__item-actions">
+                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                    <i class="el-icon-zoom-in"></i>
+                  </span>
+                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+                    <i class="el-icon-download"></i>
+                  </span>
+                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                    <i class="el-icon-delete"></i>
+                  </span>
+                </span>
+              </div>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="dialogImageUrl" alt="" />
+            </el-dialog>
+          </el-col>
+        </el-col>
+        <el-col class="four">
+          <el-button class="btn" type="primary" size="mini" @click="onSubmit('form')">提交保存</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'register',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      rules: {},
+      // uri: '/files/label/upload',
+
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('onSubmit', { data: this.form });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    //返回
+    toReturn() {
+      this.$router.push({ path: '/adminCenter/adminUser/index' });
+    },
+    // 上传图片
+    // uplSuc({ type, data }) {
+    //   this.form[type].push({ name: data.name, url: data.uri });
+    // },
+    // uplDel(data) {
+    //   let index = this.form.file.findIndex((i) => i.url == data.file.url);
+    //   this.form.file.splice(index, 1);
+    // },
+
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleDownload(file) {
+      console.log(file);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    padding: 0 0 20px 10px;
+    .sp {
+      padding: 0px 0 0 170px;
+      font-size: 24px;
+      font-weight: 700;
+      margin-right: 10px;
+    }
+  }
+  .two {
+    padding: 0 0 20px 10px;
+  }
+  .thr {
+    .thr_1 {
+      text-align: center;
+    }
+  }
+  .four {
+    padding: 20px 0 20px 310px;
+  }
+}
+</style>