提交

src/App.vue

@@ -25,4 +25,26 @@ export default {
   width: 100vw;
   height: 100vh;
 }
+
+
+*::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+*::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #babcc0;
+}
+
+*::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #ededed;
+}
 </style>

src/router/allMedia.js

@@ -27,6 +27,13 @@ export default [
         /* webpackChunkName: "analysis_detail" */ '../view/allMedia/analysis_detail.vue'
       ),
   },
+  {
+    path: '/h5editor',
+    component: () =>
+      import(
+        /* webpackChunkName: "h5editor" */ '../view/allMedia/H5Editor.vue'
+      ),
+  },
   // 主页
   {
     path: '/main_home',
@@ -61,7 +68,7 @@ export default [
           import(
             /* webpackChunkName: "h5mall" */ '../view/allMedia/H5Mall.vue'
           ),
-      },
+      }
     ],
   },
 ];

src/view/allMedia/H5Editor.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="H5Editor">
+    <div class="H5Editor_left"></div>
+    <div class="H5Editor_center">
+      <div class="page">
+        <div
+          class="pageMain"
+          :style="{
+            width: page.width + 'px',
+            height: page.height + 'px',
+            ...backgroundStyle()
+          }"
+        ></div>
+      </div>
+    </div>
+    <div class="H5Editor_right">
+      <div v-for="(item, index) in hoversList" :key="item.url">
+        <el-image
+          @click="() => selectPageFunc(index, item)"
+          :class="{ selectPage: selectPage === index }"
+          :src="item.url"
+          :fit="item.background_mode || 'fill'"
+        />
+        <div class="title">第 {{ index + 1 }} 页</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const item = JSON.parse(route.query.item || '{}');
+const hoversList = ref(item.hoversList || []);
+const selectPage = ref(0);
+const page = ref({ width: 375, height: 0 });
+
+const selectPageFunc = (index = 0) => {
+  selectPage.value = index;
+};
+
+console.log(item);
+
+// 查看页面大小，
+const img = new Image();
+img.src = hoversList.value[selectPage.value].background_url || '';
+
+img.onload = function () {
+  console.log(this.width, this.height);
+  page.value.height = (this.height / this.width) * page.value.width;
+};
+
+const backgroundStyle = () => {
+  const back = hoversList.value[selectPage.value].background_url;
+  const color = /^#|^rgb/g.test(back);
+  if (color) return {
+    'background-color': back
+  };
+  return {
+    'background-image': 'url(' + back + ')'
+  };
+};
+</script>
+
+<style scoped>
+.H5Editor_right .el-image {
+  width: 184px;
+  height: 280px;
+  margin: 0 auto;
+  display: block;
+  border: 3px solid #fff;
+}
+.H5Editor {
+  background-color: #d0cfd8;
+  height: 100%;
+}
+
+.H5Editor_left,
+.H5Editor_center,
+.H5Editor_right {
+  display: inline-block;
+  height: 100%;
+}
+
+.H5Editor_center {
+  width: calc(100% - 500px);
+  position: relative;
+}
+
+.H5Editor_center .page {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 375px;
+  height: 667px;
+  background-color: #fff;
+  overflow: auto;
+}
+
+.H5Editor_center .pageMain {
+  min-height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.H5Editor_right {
+  overflow-y: auto;
+  padding: 1em;
+  width: 300px;
+  background-color: #f3f3f3;
+}
+
+.H5Editor_left {
+  width: 200px;
+  background-color: #f3f3f3;
+}
+
+.H5Editor_right .selectPage {
+  border: 3px solid #409eff;
+}
+
+.H5Editor_right .title {
+  text-align: center;
+  color: #333;
+  padding: 8px 0;
+  font-size: 16px;
+}
+</style>

src/view/allMedia/H5Mall.vue

@@ -10,15 +10,20 @@
       />
     </div>
     <div class="main">
-      <div class="item" v-for="item,index in list" :key="index">
+      <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="body">
-            <img style="width: 20px;float: left;" :src="defaultIcon" />
-            <span>
-                <img style="width: 20px;" :src="eyeIcon" />
-                <span style="vertical-align: middle;" v-text="item.hot"></span>
-            </span>
+          <img style="width: 20px; float: left" :src="defaultIcon" />
+          <span>
+            <img style="width: 20px" :src="eyeIcon" />
+            <span style="vertical-align: middle" v-text="item.hot"></span>
+          </span>
         </div>
       </div>
     </div>
@@ -27,20 +32,20 @@
 
 <script setup>
 import { ref } from 'vue';
-// import { useRouter, useRoute } from 'vue-router';
-import defaultIcon from "../../assets/img/default_user.png";
-import eyeIcon from "../../assets/img/eye.png"
-import H5 from "./components/H5.vue";
-import LONGPAGE from "./components/LONGPAGE.vue";
-import POSTER from "./components/POSTER.vue";
+import { useRouter } from 'vue-router';
+import defaultIcon from '../../assets/img/default_user.png';
+import eyeIcon from '../../assets/img/eye.png';
+import H5 from './components/H5.vue';
+import LONGPAGE from './components/LONGPAGE.vue';
+import POSTER from './components/POSTER.vue';
 import { getH5Mall } from '../../api/index.js';
 
 const components = {
-    H5,
-    LONGPAGE,
-    POSTER
-}
-// const router = useRouter();
+  H5,
+  LONGPAGE,
+  POSTER,
+};
+const router = useRouter();
 // const route = useRoute();
 
 const searchText = ref('');
@@ -49,6 +54,15 @@ const list = ref([]);
 getH5Mall({}).then(r => {
   list.value = r.list || [];
 });
+
+const toH5Editor = item => {
+  router.push({
+    path: '/h5editor',
+    query: {
+      item: JSON.stringify(item),
+    },
+  });
+};
 </script>
 
 <style scoped>
@@ -85,44 +99,50 @@ getH5Mall({}).then(r => {
   color: var(--el-border-color);
 }
 
-.main{
-    font-weight: 500;
-    margin-top: 1em;
-    padding: 1em 0 1em 1em;
+.main {
+  font-weight: 500;
+  margin-top: 1em;
+  padding: 1em 0 1em 1em;
 }
 
 .main .item {
-    display: inline-block;
-    width: 184px;
-    height: 363px;
-    transition: all .3s;
-    border-radius: 2px;
-    vertical-align: middle;
-    margin-right: 1em;
-    border-radius: 5px;
-    overflow: hidden;
+  display: inline-block;
+  width: 184px;
+  height: 363px;
+  transition: all 0.3s;
+  border-radius: 2px;
+  vertical-align: middle;
+  margin-right: 1em;
+  border-radius: 5px;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: var(--el-box-shadow-lighter);
 }
 
-.main_item{
-    color: #666;
-    padding: 0 5px;
-    margin: 5px 0;
-    font-size: 14px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.el-image {
+  height: 280px;
+}
+
+.main_item {
+  color: #666;
+  padding: 0 5px;
+  margin: 5px 0;
+  font-size: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.main .item:hover{
-    box-shadow: var(--el-box-shadow);
-    margin-top: -15px;
+.main .item:hover {
+  box-shadow: var(--el-box-shadow);
+  margin-top: -15px;
 }
 
-.main .body{
-    padding: 0 5px;
-    text-align: right;
+.main .body {
+  padding: 0 5px;
+  text-align: right;
 }
-.main img{
-    vertical-align: middle;
+.main img {
+  vertical-align: middle;
 }
 </style>

src/view/allMedia/components/H5.vue

@@ -8,7 +8,7 @@
         :fit="item.background_mode || 'fill'"
       />
     <div class="inShow">
-      <el-progress stroke-linecap="square" :duration="1000" :show-text="false" :percentage="percentage" />
+        <div :style="{'background-color': '#409eff','height': '3px' , 'width': percentage + '%'}"></div>
     </div>
   </div>
 </template>
@@ -51,6 +51,9 @@ const mouseleave = ()=> {
 </script>
 
 <style scoped>
+.el-image {
+  height: 280px;
+}
 .H5{
     min-height: 300px;
     font-size: 0;
@@ -62,6 +65,7 @@ const mouseleave = ()=> {
 
 .inShow {
   position: relative;
+  font-size: 14px
 }
 </style>
 

src/view/allMedia/components/POSTER.vue

@@ -21,7 +21,10 @@ const props = defineProps({
 });
 const hoversList = ref([]);
 hoversList.value = props.item.hoversList || [];
-console.log(props.item);
 </script>
 
-<style scoped></style>
+<style scoped>
+.el-image {
+  height: 280px;
+}
+</style>