提交

src/view/allMedia/H5Mall.vue

@@ -1,72 +1,80 @@
 <template>
-  <div class="H5Mall">
+  <div>
     <header_local />
-    <div class="mainBody">
-      <div
-        class="item"
-        @click="() => toH5Editor(item)"
-        v-for="(item, index) in list"
-        :key="index"
-      >
-        <component :is="components[item.type]" :item="item"></component>
-        <div class="main_item" v-text="item.title"></div>
+    <div class="H5Mall">
+      <div class="mainBody">
+        <div
+          class="item"
+          @click="() => toH5Editor(item)"
+          v-for="(item, index) in list"
+          :key="index"
+        >
+          <component :is="components[item.type]" :item="item"></component>
+          <div class="main_item" v-text="item.title"></div>
+        </div>
       </div>
+      <el-button @click="showData" class="createPageList">
+        已创建页面
+      </el-button>
+      <el-dialog v-model="show" title="已创建页面">
+        <el-table :data="localList.list">
+          <el-table-column property="title" label="页面名称" />
+          <el-table-column label="封面图" header-align="center" width="100px">
+            <template #default="scope">
+              <el-image
+                style="width: 76px; height: 100px"
+                :src="scope.row.cover"
+                fit="contain"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="100px">
+            <template #default="scope">
+              {{ h5Status[scope.row.h5Status] }}
+            </template>
+          </el-table-column>
+          <el-table-column property="url" label="操作">
+            <template #default="scope">
+              <el-button
+                v-if="showCopy(scope.row.url)"
+                type="primary"
+                link
+                @click="() => copyurl(scope.row.url)"
+              >
+                复制链接
+              </el-button>
+              <el-button
+                v-if="scope.row.url"
+                type="primary"
+                link
+                @click="() => openurl(scope.row.url)"
+              >
+                打开
+              </el-button>
+              <el-button link type="primary" @click="() => editBL(scope)">
+                修改
+              </el-button>
+              <el-popconfirm
+                title="是否确认删除?"
+                @confirm="() => deleteBL(scope)"
+              >
+                <template #reference>
+                  <el-button link type="danger"> 删除 </el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <template #footer>
+          <el-pagination
+            @current-change="currentChange"
+            background
+            layout="prev, pager, next"
+            :total="localList.total"
+          />
+        </template>
+      </el-dialog>
     </div>
-    <el-button @click="showData" class="createPageList"> 已创建页面 </el-button>
-    <el-dialog v-model="show" title="已创建页面">
-      <el-table :data="localList.list">
-        <el-table-column property="title" label="页面名称" />
-        <el-table-column label="封面图" header-align="center" width="100px">
-          <template #default="scope">
-            <el-image style="width: 76px; height: 100px" :src="scope.row.cover" fit="contain" />
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="100px">
-          <template #default="scope">
-            {{ h5Status[scope.row.h5Status] }}
-          </template>
-        </el-table-column>
-        <el-table-column property="url" label="操作">
-          <template #default="scope">
-            <el-button
-              v-if="showCopy(scope.row.url)"
-              type="primary"
-              link
-              @click="() => copyurl(scope.row.url)"
-            >
-              复制链接
-            </el-button>
-            <el-button
-              v-if="scope.row.url"
-              type="primary"
-              link
-              @click="() => openurl(scope.row.url)"
-            >
-              打开
-            </el-button>
-            <el-button link type="primary" @click="() => editBL(scope)">
-              修改
-            </el-button>
-            <el-popconfirm
-              title="是否确认删除?"
-              @confirm="() => deleteBL(scope)"
-            >
-              <template #reference>
-                <el-button link type="danger"> 删除 </el-button>
-              </template>
-            </el-popconfirm>
-          </template>
-        </el-table-column>
-      </el-table>
-      <template #footer>
-        <el-pagination
-          @current-change="currentChange"
-          background
-          layout="prev, pager, next"
-          :total="localList.total"
-        />
-      </template>
-    </el-dialog>
   </div>
 </template>
 
@@ -160,39 +168,41 @@ const deleteBL = item => {
 
 const openurl = url => window.open(url);
 
-const showCopy = url => ('clipboard' in navigator) && url
+const showCopy = url => 'clipboard' in navigator && url;
 
 const copyurl = url => {
   if (!('clipboard' in navigator)) return;
-  auth().then(res => {
-    if (!res) {
-      // 未授权
-      ElMessage({
-        type: 'error',
-        message: '授权未通过',
-      });
-      return;
-    }
-    navigator.clipboard.writeText(url).then(
-      () => {
-        ElMessage({
-          type: 'success',
-          message: '地址复制成功',
-        });
-      },
-      () => {
+  auth()
+    .then(res => {
+      if (!res) {
+        // 未授权
         ElMessage({
           type: 'error',
-          message: '复制失败',
+          message: '授权未通过',
         });
+        return;
       }
-    );
-  }).catch(() => {
-    ElMessage({
-      type: 'error',
-      message: '授权未通过',
+      navigator.clipboard.writeText(url).then(
+        () => {
+          ElMessage({
+            type: 'success',
+            message: '地址复制成功',
+          });
+        },
+        () => {
+          ElMessage({
+            type: 'error',
+            message: '复制失败',
+          });
+        }
+      );
     })
-  });
+    .catch(() => {
+      ElMessage({
+        type: 'error',
+        message: '授权未通过',
+      });
+    });
 };
 
 const auth = () => {
@@ -216,12 +226,13 @@ const auth = () => {
 <style scoped>
 .H5Mall {
   padding: 1em;
-  height: 100%;
+  height: calc(100% - 2em);
+  position: relative;
 }
 
 .mainBody {
   font-weight: 500;
-  padding: 2em 0 1em 1em;
+  padding: 2.5em 0 1em 1em;
 }
 
 .mainBody .item {