styl

src/layout/index.vue

@@ -51,43 +51,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
+@import '~@/styles/mixin.scss';
+@import '~@/styles/variables.scss';
 
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: #f0f2f5;
 
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    transition: width 0.28s;
   }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>

src/views/AppController/index.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="body">
-    <el-card class="box-card">
+    <el-card class="box-card" style="box-shadow: none;">
       <div slot="header" class="clearfix">
-        <el-button type="primary" style="float: right" @click="dialogFormVisible = true">新建应用</el-button>
+        <el-button
+          type="primary"
+          style="float: right"
+          icon="el-icon-plus"
+          @click="dialogFormVisible = true"
+        >新建应用</el-button>
       </div>
       <div class="text item">
         <el-table stripe :data="tableData" border style="width: 100%">
@@ -10,18 +15,19 @@
 
           <el-table-column align="center" label="操作" min-width="100" width="500">
             <template slot-scope="scope">
-              <el-button
-                style="margin-right:5em"
+              <el-link
+                :underline="false"
+                style="margin-right:1em"
                 type="primary"
                 @click="handeldialog(scope.row.appId)"
-              >编辑</el-button>
+              >编辑</el-link>
               <el-popconfirm
                 icon="el-icon-info"
                 icon-color="red"
                 title="确定要删除该配置吗？"
                 @onConfirm="handleDelete(scope.row.appId)"
               >
-                <el-button slot="reference" type="danger">删除</el-button>
+                <el-link slot="reference" type="danger" :underline="false">删除</el-link>
               </el-popconfirm>
             </template>
           </el-table-column>
@@ -204,5 +210,4 @@ export default {
   }
 }
 </script>
-<style>
-</style>
+

src/views/WeChatConfig/Edit.vue

@@ -1,69 +1,74 @@
 <template>
   <div>
-    <el-row :gutter="24">
-      <el-col :span="18">
-        <el-form
-          ref="ruleForm"
-          :model="ruleForm"
-          :rules="rules"
-          label-width="10vw"
-          class="demo-ruleForm"
-        >
-          <el-form-item label="配置名称" prop="appName" style="width:30vw">
-            <el-input v-model="ruleForm.appName" />
-          </el-form-item>
-          <el-form-item label="二维码" prop="qrCode">
-            <img
-              width="150"
-              alt="二维码"
-              src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png"
-            >
-          </el-form-item>
-          <el-form-item label="类型" prop="appType">
-            <el-select v-model="ruleForm.appType" placeholder="请选择类型">
-              <el-option label="小程序" value="ma" />
-              <el-option label="公众号" value="md" />
-            </el-select>
-          </el-form-item>
-          <el-form-item style="width:30vw" label="AppID" prop="appid">
-            <el-input v-model="ruleForm.appid" />
-          </el-form-item>
-          <el-form-item style="width:30vw" label="Secret" prop="secret">
-            <el-input v-model="ruleForm.secret" />
-          </el-form-item>
-          <el-form-item style="width:30vw" label="Token" prop="token">
-            <el-input v-model="ruleForm.token" />
-          </el-form-item>
-          <el-form-item style="width:30vw" label="AesKey" prop="aesKey">
-            <el-input v-model="ruleForm.aesKey" />
-          </el-form-item>
-          <el-form-item style="width:30vw" label="消息格式类型" prop="msgDataFormat">
-            <el-input v-model="ruleForm.msgDataFormat" />
-          </el-form-item>
-          <el-form-item style="width:30vw" label="接口代理地址" prop="httpPoxyHost">
-            <el-input v-model="ruleForm.httpPoxyHost" />
-          </el-form-item>
-          <el-form-item style="width:30vw" label="接口代理端口" prop="httpProxyPort">
-            <el-input v-model="ruleForm.httpProxyPort" type="Number" />
-          </el-form-item>
-          <el-form-item style="width:30vw" label="第三方接口地址" prop="apiUrl">
-            <el-input v-model="ruleForm.apiUrl" />
-          </el-form-item>
-          <el-form-item label="发布状态" prop="status">
-            <el-select v-model="ruleForm.status" placeholder="请选择状态">
-              <el-option label="发布" :value="1" />
-              <el-option label="未发布" :value="0" />
-            </el-select>
-          </el-form-item>
+    <el-card class="box-card">
+      <el-row :gutter="24">
+        <el-col :span="18">
+          <el-form
+            ref="ruleForm"
+            :model="ruleForm"
+            :rules="rules"
+            label-width="10vw"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="配置名称" prop="appName" style="width:30vw">
+              <el-input v-model="ruleForm.appName" />
+            </el-form-item>
+            <el-form-item label="二维码" prop="qrCode">
+              <img
+                width="150"
+                alt="二维码"
+                src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png"
+              />
+            </el-form-item>
+            <el-form-item label="类型" prop="appType">
+              <el-select v-model="ruleForm.appType" placeholder="请选择类型">
+                <el-option label="小程序" value="ma" />
+                <el-option label="公众号" value="md" />
+              </el-select>
+            </el-form-item>
+            <el-form-item style="width:30vw" label="AppID" prop="appid">
+              <el-input v-model="ruleForm.appid" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="Secret" prop="secret">
+              <el-input v-model="ruleForm.secret" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="Token" prop="token">
+              <el-input v-model="ruleForm.token" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="AesKey" prop="aesKey">
+              <el-input v-model="ruleForm.aesKey" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="消息格式类型" prop="msgDataFormat">
+              <el-input v-model="ruleForm.msgDataFormat" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="接口代理地址" prop="httpPoxyHost">
+              <el-input v-model="ruleForm.httpPoxyHost" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="接口代理端口" prop="httpProxyPort">
+              <el-input v-model="ruleForm.httpProxyPort" type="Number" />
+            </el-form-item>
+            <el-form-item style="width:30vw" label="第三方接口地址" prop="apiUrl">
+              <el-input v-model="ruleForm.apiUrl" />
+            </el-form-item>
+            <el-form-item label="发布状态" prop="status">
+              <el-select v-model="ruleForm.status" placeholder="请选择状态">
+                <el-option label="发布" :value="1" />
+                <el-option label="未发布" :value="0" />
+              </el-select>
+            </el-form-item>
 
-          <el-form-item>
-            <el-button type="primary" @click="submitForm('ruleForm')">{{ !configId?'新建配置':'修改配置' }}</el-button>
-            <!-- <el-button type="primary" @click="submitForm('ruleForm')">应用配置</el-button> -->
-            <el-button @click="resetForm('ruleForm')">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
+            <el-form-item>
+              <el-button
+                type="primary"
+                @click="submitForm('ruleForm')"
+              >{{ !configId?'新建配置':'修改配置' }}</el-button>
+              <!-- <el-button type="primary" @click="submitForm('ruleForm')">应用配置</el-button> -->
+              <el-button @click="resetForm('ruleForm')">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
   </div>
 </template>
 
@@ -182,3 +187,9 @@ export default {
   margin-top: 1em;
 }
 </style>
+
+<style lang="scss" scoped>
+.box-card {
+  box-shadow: none;
+}
+</style>

src/views/WeChatConfig/index.vue

@@ -1,22 +1,31 @@
 <template>
   <div class="body">
     <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <el-button type="primary" style="float: right" @click="handleAdd">新建配置</el-button>
-      </div>
       <div class="text item">
+        <div slot="header" class="clearfix">
+          <el-button type="primary" style="float: right" icon="el-icon-plus" @click="handleAdd">新建配置</el-button>
+        </div>
         <el-table stripe :data="tableData" border style="width: 100%">
           <el-table-column prop="appName" label="配置名称" />
 
           <el-table-column prop="picture" label="二维码" align="center">
             <template slot-scope="scope">
               <!-- :src="scope.row.qrCode" -->
+              <el-popover placement="right" title="二维码" trigger="hover">
+                <el-image
+                  slot="reference"
+                  src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png"
+                  alt="scope.row.image_url"
+                  style="max-height: 110px;max-width: 110px"
+                />
+                <el-image src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png" />
+              </el-popover>
 
-              <img
+              <!-- <img
                 src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png"
                 min-width="70"
-                height="100"
-              />
+                height="80"
+              />-->
             </template>
           </el-table-column>
 
@@ -31,18 +40,18 @@
           </el-table-column>
           <el-table-column align="center" label="操作" min-width="100" width="280">
             <template slot-scope="scope">
-              <el-button style="margin-right:1em" type="primary">
+              <el-link :underline="false" style="margin-right:1em" type="primary">
                 <router-link
                   :to="{path:'WeChatConfig/Edit',query: { configId: scope.row.configId }}"
                 >编辑</router-link>
-              </el-button>
+              </el-link>
               <el-popconfirm
                 icon="el-icon-info"
                 icon-color="red"
                 title="确定要删除该配置吗？"
                 @onConfirm="handleDelete(scope.row)"
               >
-                <el-button slot="reference" type="danger">删除</el-button>
+                <el-link slot="reference" :underline="false" type="danger">删除</el-link>
               </el-popconfirm>
             </template>
           </el-table-column>
@@ -132,5 +141,8 @@ export default {
   }
 }
 </script>
-<style>
+<style lang="scss" scoped>
+.box-card {
+  box-shadow: none;
+}
 </style>