提交一下

1

package.json

@@ -38,6 +38,7 @@
     "plyr": "^3.6.12",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",
+    "swiper": "^8.2.4",
     "umi-request": "^1.4.0",
     "vconsole": "^3.14.6",
     "vue": "^3.2.26",

src/components/albumItem/index.module.less

@@ -1,5 +1,9 @@
 .itemWrap {
+  &:nth-child(5n){
+    margin-right: 0;
+  }
   margin-bottom: 28px;
+  margin-right: 26px;
   h2 {
     line-height: 30px;
     font-size: 22px;

src/components/silder/images/silder3.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="25px" viewBox="0 0 16 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-596.000000, -185.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组-14备份" transform="translate(572.000000, 31.000000)">
+                <g id="编组" transform="translate(24.000000, 154.000000)">
+                    <path d="M13.4672665,0 L2.4512916,0 C1.10097351,0 0.00629900475,1.09467451 0.00629900475,2.44499259 L0.00629900475,22.0049333 C0.00629900475,23.3552514 1.10097351,24.4499259 2.4512916,24.4499259 L13.4672665,24.4499259 C14.8175846,24.4499259 15.9122591,23.3552514 15.9122591,22.0049333 L15.9122591,2.44499259 C15.9122591,1.09467451 14.8175846,0 13.4672665,0 Z M14.6897628,21.3936851 C14.6897628,22.4064321 13.8687653,23.2274296 12.8560183,23.2274296 L3.06253975,23.2274296 C2.04979276,23.2274296 1.22879531,22.4064321 1.22879531,21.3936851 L1.22879531,3.05624072 C1.22879531,2.04349373 2.04979276,1.22249629 3.06253975,1.22249629 L12.8560183,1.22249629 C13.8687653,1.22249629 14.6897628,2.04349373 14.6897628,3.05624072 L14.6897628,21.3936851 Z" id="形状"></path>
+                    <polygon id="路径" points="1.22879531 4.35472092 14.6897628 4.35472092 14.6897628 5.5772172 1.22879531 5.5772172"></polygon>
+                    <polygon id="路径" points="1.22879531 18.4134283 14.6908772 18.4134283 14.6908772 19.6359246 1.22879531 19.6359246"></polygon>
+                    <path d="M6.73678276,21.469669 C6.73678276,22.1448351 7.284113,22.6921653 7.95927906,22.6921653 C8.63444512,22.6921653 9.18177535,22.1448351 9.18177535,21.469669 C9.18177535,20.7945029 8.63444512,20.2471727 7.95927906,20.2471727 C7.284113,20.2471727 6.73678276,20.7945029 6.73678276,21.469669 L6.73678276,21.469669 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/silder/images/silder5.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="9px" viewBox="0 0 16 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-596.000000, -344.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组-14备份" transform="translate(572.000000, 31.000000)">
+                <g id="编组" transform="translate(24.000000, 313.000000)">
+                    <path d="M15.7332771,7.5012987 L9.28194158,1.24329004 L7.99988819,0 L6.7178348,1.24329004 L0.266499261,7.5012987 C-0.0888330869,7.84415584 -0.0888330869,8.4 0.266499261,8.74285714 C0.620046018,9.08571429 1.19322031,9.08571429 1.54855266,8.74285714 L7.99988819,2.48484848 L14.4530093,8.74285714 C14.8065561,9.08571429 15.3797304,9.08571429 15.7350627,8.74285714 C16.0886095,8.4 16.0886095,7.84415584 15.7332771,7.5012987 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/silder/index.module.less

@@ -0,0 +1,159 @@
+.silderWrap {
+  position: fixed;
+  top: 50%;
+  right: 70px;
+  z-index: 200;
+  .silderList {
+    background-color: #fff;
+    width: 64px;
+    // height: 268px;
+
+    border: 1px solid #ececec;
+
+    .silderItem {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 11px 0 0;
+      font-size: 12px;
+      overflow: hidden;
+
+      p {
+        margin-top: 8px;
+        color: #666666;
+      }
+      .line {
+        margin-top: 10px;
+        width: 48px;
+        height: 1px;
+        background-color: #ececec;
+      }
+      &:hover {
+        p {
+          color: #2dc7aa;
+        }
+        img {
+          filter: drop-shadow(#2dc7aa 80px 0);
+          transform: translateX(-80px);
+        }
+      }
+    }
+
+    .silderItem {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 11px 0 0;
+
+      font-size: 12px;
+      overflow: hidden;
+      p {
+        margin-top: 8px;
+        color: #666666;
+      }
+      .line {
+        margin-top: 10px;
+        width: 48px;
+        height: 1px;
+        background-color: #ececec;
+      }
+      &:hover {
+        p {
+          color: #2dc7aa;
+        }
+        img {
+          filter: drop-shadow(#2dc7aa 80px 0);
+          transform: translateX(-80px);
+        }
+      }
+    }
+  }
+
+  .goTop {
+    cursor: pointer;
+    margin-top: 20px;
+    background-color: #fff;
+    width: 64px;
+    height: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 28px;
+    border: 1px solid #ececec;
+    overflow: hidden;
+    &:hover {
+      img {
+        filter: drop-shadow(#2dc7aa 80px 0);
+        transform: translateX(-80px);
+      }
+    }
+  }
+}
+.submitBtn {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background-color: #2dc7aa;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  margin-top: 50px;
+  cursor: pointer;
+  &:hover {
+    background-color: #2ac0a3;
+  }
+}
+.submsg {
+  color: #999;
+}
+.Mopopver {
+  /deep/.code-item {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .hoverTitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 17px;
+  }
+  /deep/.hoverMsg {
+    padding-top: 5px;
+    font-size: 16px;
+    color: #1a1a1a;
+    line-height: 22px;
+    font-weight: 700;
+  }
+  .silderItem {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 11px 0 0;
+    font-size: 12px;
+    overflow: hidden;
+    p {
+      margin-top: 8px;
+      color: #666666;
+    }
+    .line {
+      margin-top: 10px;
+      width: 48px;
+      height: 1px;
+      background-color: #ececec;
+    }
+    &:hover {
+      p {
+        color: #2dc7aa;
+      }
+      img {
+        filter: drop-shadow(#2dc7aa 80px 0);
+        transform: translateX(-80px);
+      }
+    }
+  }
+}

src/components/silder/index.tsx

@@ -0,0 +1,120 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import classes from './index.module.less'
+import { ElButton, ElIcon, ElPopover } from 'element-plus'
+import { scrollAnimation } from '@/util/scroll'
+import silder1 from './images/silder1.svg'
+import silder2 from './images/silder2.svg'
+import silder3 from './images/silder3.svg'
+import silder4 from './images/silder4.svg'
+import silder5 from './images/silder5.svg'
+import download from './images/download.png'
+import publicCode from './images/public-code.jpg'
+export default defineComponent({
+  name: 'silder',
+  setup() {
+    const state = reactive({
+      showgo: false
+    })
+    const gotop = () => {
+      const currentY =
+        document.documentElement.scrollTop || document.body.scrollTop
+      scrollAnimation(currentY, 0)
+    }
+    onMounted(() => {
+      window.onscroll = function () {
+        if (document.documentElement.scrollTop > 300) {
+          state.showgo = true
+        } else {
+          state.showgo = false
+        }
+      }
+    })
+    return () => (
+      <>
+        <div class={classes.silderWrap}>
+          <div class={classes.silderList}>
+            <ElPopover
+              placement="left"
+              trigger="hover"
+              popper-class="Mopopver"
+              v-slots={{
+                reference: () => (
+                  <div class={classes.silderItem}>
+                    <img src={silder2}  />
+                    <p>电话咨询</p>
+                    <div class={classes.line}></div>
+                  </div>
+                )
+              }}
+            >
+              <div>
+                <p class={classes.hoverTitle}>咨询电话：</p>
+                <p class={classes.hoverMsg}>400-8851569</p>
+              </div>
+            </ElPopover>
+            <ElPopover
+              placement="left"
+              trigger="hover"
+              popper-class="Mopopver"
+              v-slots={{
+                reference: () => (
+                  <div class={classes.silderItem}>
+                    <img src={silder3}  />
+                    <p>APP下载</p>
+                    <div class={classes.line}></div>
+                  </div>
+                )
+              }}
+            >
+              <div>
+                <div class={classes.codeItem}>
+                  <img
+                    src={download}
+                    width="111px"
+                    height="111px"
+
+                  />
+                  <p>扫码下载APP</p>
+                </div>
+              </div>
+            </ElPopover>
+            <ElPopover
+              placement="left"
+              trigger="hover"
+              popper-class="Mopopver"
+              v-slots={{
+                reference: () => (
+                  <div class={classes.silderItem}>
+                    <img src={silder1}  />
+                    <p>关注微信</p>
+                  </div>
+                )
+              }}
+            >
+              <div>
+                <div class={classes.codeItem}>
+                  <img
+                    src={publicCode}
+                    width="111px"
+                    height="111px"
+
+                  />
+                  <p>微信订阅号</p>
+                </div>
+              </div>
+            </ElPopover>
+          </div>
+
+          {state.showgo ? (
+            <div class={classes.goTop} onClick={gotop}>
+              <img src={silder5}  />
+            </div>
+          ) : (
+            ''
+          )}
+
+        </div>
+      </>
+    )
+  }
+})

src/components/videoDetailItem/index.module.less

@@ -1,7 +1,11 @@
 .itemWrap {
-  width: 387px;
+  width: 386px;
   margin-bottom: 20px;
+  margin-right: 20px;
   border-radius: 4px;
+  &:nth-child(3n){
+    margin-right:0;
+  }
   .detaile {
     width: 387px;
   }

src/util/scroll.ts

@@ -0,0 +1,27 @@
+/**
+ * 动画垂直滚动到页面指定位置
+ * @param { Number } currentY 当前位置
+ * @param { Number } targetY 目标位置
+ */
+ export function scrollAnimation (currentY:number, targetY:number) {
+  // 获取当前位置方法
+  // const currentY = document.documentElement.scrollTop || document.body.scrollTop
+
+  // 计算需要移动的距离
+  let needScrollTop = targetY - currentY
+  let _currentY = currentY
+  setTimeout(() => {
+    // 一次调用滑动帧数，每次调用会不一样
+    const dist = Math.ceil(needScrollTop / 10)
+    _currentY += dist
+    window.scrollTo(_currentY, currentY)
+    // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
+    if (needScrollTop > 10 || needScrollTop < -10) {
+      scrollAnimation(_currentY, targetY)
+    } else {
+      window.scrollTo(_currentY, targetY)
+    }
+  }, 1)
+}
+
+

src/views/home/index.module.less

@@ -1,9 +1,16 @@
+
+.mySwiper {
+  min-height: 300px;
+  /deep/.swiper-slide {
+    min-height: 300px;
+  }
+}
 .title {
   font-size: 20px;
   color: red;
 }
-.container {
-  width: 1200px;
+.w1200 {
+  width: 1200px !important;
   margin: 0 auto;
 }
 .section {
@@ -27,4 +34,43 @@
       line-height: 45px;
     }
   }
+  .albumList {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+  }
+  .videoList {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 25px 0;
+  }
+  .videoNav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    h5 {
+      font-size: 22px;
+      font-weight: 500;
+      color: #000000;
+      line-height: 30px;
+    }
+    .wrapRight {
+      display: flex;
+      flex-direction: row;
+      cursor: pointer;
+      span {
+        color: #666;
+      }
+      .arrow {
+        width: 20px;
+        height: 20px;
+        margin-left: 8px;
+      }
+    }
+  }
 }

src/views/home/index.tsx

@@ -1,49 +1,121 @@
 // import { PaperClipIcon } from '@heroicons/vue/solid'
-import { defineComponent } from 'vue'
+import { defineComponent,toRefs, reactive, onMounted, ref } from 'vue'
+import arrow from '@/components/musicLIstItem/images/arrow.png'
 import styles from './index.module.less'
 import albumItem from '@/components/albumItem'
 import videoDetailItem from '@/components/videoDetailItem'
 import musicLIstItem from '@/components/musicLIstItem'
 import titleDot from './images/titleDot.png'
 import hotSearch from '@/components/hotSearch'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation, Pagination, Scrollbar, A11y } from "swiper";
+import silder from '@/components/silder'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import 'swiper/css/scrollbar'
 export default defineComponent({
   name: 'home',
   components: {
     albumItem,
     videoDetailItem,
     musicLIstItem,
-    hotSearch
+    hotSearch,
+    Swiper,
+    SwiperSlide,
+    silder
   },
-  render() {
-    return (
-      <div class="bg-white">
-        轮播图
-        <div class="container mx-auto">
-          <div class={styles.section}>
-            <div class={styles.titleWrap}>
-              <img src={titleDot} class={styles.dotImg} alt="" />
-              <h4>热门专辑</h4>
-              <img src={titleDot} class={styles.dotImg} alt="" />
-            </div>
-            <hotSearch></hotSearch>
-            <div class={styles.albumList}>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
-              <albumItem></albumItem>
+  setup() {
+    const state = reactive({
+      modules:[Navigation, Pagination, Scrollbar, A11y],
+    })
+    const onSwiper = swiper => {
+      console.log(swiper)
+    }
+    const onSlideChange = () => {
+      console.log('slide change')
+    }
+    return () => (
+      <div>
+        <swiper
+        modules={state.modules}
+          class={styles.mySwiper}
+          slides-per-view={1}
+          space-between={50}
+          pagination={{ clickable: true }}
+          navigation={{
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }}
+          loop={true}
+          onSwiper={onSwiper}
+          onSlideChange={onSlideChange}
+        >
+          <swiper-slide>Slide 1</swiper-slide>
+          <swiper-slide>Slide 2</swiper-slide>
+          <swiper-slide>Slide 3</swiper-slide>
+          <swiper-slide>Slide 4</swiper-slide>
+          <swiper-slide>Slide 5</swiper-slide>
+          <swiper-slide>Slide 6</swiper-slide>
+        </swiper>
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+        <div class="bg-white">
+          <div class={styles.w1200}>
+            <div class={styles.section}>
+              <div class={styles.titleWrap}>
+                <img src={titleDot} class={styles.dotImg} alt="" />
+                <h4>热门专辑</h4>
+                <img src={titleDot} class={styles.dotImg} alt="" />
+              </div>
+              <hotSearch></hotSearch>
+              <div class={styles.albumList}>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+                <albumItem></albumItem>
+              </div>
             </div>
+            {/*
+              <videoDetailItem></videoDetailItem>
+              <musicLIstItem></musicLIstItem> */}
           </div>
+        </div>
+        <div>
+          <div class={styles.w1200}>
+            <div class={styles.section}>
+              <div class={styles.titleWrap}>
+                <img src={titleDot} class={styles.dotImg} alt="" />
+                <h4>精品视频课</h4>
+                <img src={titleDot} class={styles.dotImg} alt="" />
+              </div>
+              <div class={styles.videoNav}>
+                <h5>精品视频课</h5>
+                <div class={styles.wrapRight}>
+                  <span>更多</span>
+                  <img class={styles.arrow} src={arrow} alt="" />
+                </div>
+              </div>
+              <div class={styles.videoList}>
+                <videoDetailItem></videoDetailItem>
+                <videoDetailItem></videoDetailItem>
+                <videoDetailItem></videoDetailItem>
+                <videoDetailItem></videoDetailItem>
+                <videoDetailItem></videoDetailItem>
+                <videoDetailItem></videoDetailItem>
+              </div>
+            </div>
 
-          <albumItem></albumItem>
-          <videoDetailItem></videoDetailItem>
-          <musicLIstItem></musicLIstItem>
+            {/* <musicLIstItem></musicLIstItem> */}
+          </div>
         </div>
+        < silder></ silder>
       </div>
     )
   }