提交

1

src/components/albumItem/index.module.less

@@ -0,0 +1,36 @@
+.itemWrap {
+  h2 {
+    line-height: 30px;
+    font-size: 22px;
+    font-weight: 500;
+    color: #000000;
+    line-height: 30px;
+    margin: 6px 0;
+  }
+  .hold {
+    width: 219px;
+  }
+  span {
+    color: #999;
+    font-size: 18px;
+  }
+  .itemBottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    img {
+      width: 19px;
+      margin-right: 4px;
+      // height: 18px;
+    }
+    .itemBottomL {
+      margin-right: 21px;
+    }
+    .itemBottomL, .itemBottomR{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+    }
+  }
+}

src/components/albumItem/index.tsx

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+
+import classes from './index.module.less'
+import hold from './images/hold.png'
+import start from './images/start.png'
+import pan from './images/pan.png'
+export default defineComponent({
+  name: 'albumItem',
+  setup() {
+    return () => (
+      <>
+        <div class={classes.itemWrap}>
+          <img src={hold} alt="" class={classes.hold} />
+          <h2>专辑名称</h2>
+          <div class={classes.itemBottom}>
+            <div class={classes.itemBottomL}>
+              <img src={pan} alt="" />
+              <span>24首</span>
+            </div>
+            <div class={classes.itemBottomR}>
+              <img src={start} alt="" />
+              <span>24收藏</span>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/components/col-footer/index.module.less

@@ -0,0 +1,97 @@
+.footerSection {
+  overflow: hidden;
+  margin: 0 auto;
+  background: #262D45;
+}
+
+.footerInfo {
+  color: #cecece;
+  background: #262D45;
+  padding: 77px 0 35px;
+  .width1200 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    h2 {
+      color: #fff;
+      font-size: 14px;
+      line-height: 31px;
+      text-align: left;
+      font-weight: 400;
+    }
+    .attention {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      .qrcode-item {
+        display: inline-block;
+        font-size: 0;
+        padding-right: 34px;
+        p {
+          font-size: 12px;
+          color: #cecece;
+          padding: 8px 0;
+          text-align: center;
+          margin-top: 10px;
+        }
+      }
+    }
+    .friendShip {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      .lineWrap {
+        margin-right: 20px;
+      }
+      .itemWrap {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+
+        .friendshipItem {
+          a {
+            font-size: 12px;
+            color: #cecece;
+            line-height: 37px;
+            margin-right: 30px;
+            display: inline-block;
+            text-align: left;
+            text-decoration: none;
+            &:hover,
+            &:after {
+              color: #cecece;
+            }
+          }
+        }
+      }
+      .hotLine {
+        text-align: left;
+        color: #cecece;
+        margin-right: 30px;
+        p {
+          font-size: 16px;
+          line-height: 37px;
+          span {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+.footerCoptyright {
+  border-top: 1px solid #585858;
+  // background: url("../assets/images/footerBg.png") no-repeat center;
+  // background-size: cover;
+  height: 82px;
+  p {
+    text-align: center;
+    font-size: 12px;
+    color: #cecece;
+    line-height: 20px;
+    padding-top: 21px;
+    a{
+      color: #cecece;
+    }
+  }
+}

src/components/col-footer/index.tsx

@@ -1,8 +1,88 @@
 import { defineComponent } from 'vue'
-
+import classes  from './index.module.less'
 export default defineComponent({
   name: 'col-footer',
   setup() {
-    return () => <>footer</>
+    return () => (
+      <>
+        <div>
+          <div class={classes.footerSection}>
+            <div class={classes.footerInfo}>
+              <div class={classes.width1200} >
+                <div  class={classes.attention} >
+                  <div class={classes.qrcode} >
+                    <div class={classes.qrcodeItem}  style="padding-right:50px">
+                      <img
+                        src="../assets/images/logoWhile1.png"
+                        width="142px"
+                        height="65px"
+                        alt=""
+                      />
+                    </div>
+                  </div>
+                  <div class={classes.qrcode}>
+                    <div class={classes.qrcodeItem}>
+                      <img
+                        src="../assets/images/public-code.jpg"
+                        width="74px"
+                        height="74px"
+                      />
+                      <p>微信订阅号</p>
+                    </div>
+                  </div>
+                  <div class={classes.qrcode}>
+                    <div  class={classes.qrcodeItem}>
+                      <img
+                        src="../assets/images/download.png"
+                        width="74px"
+                        height="74px"
+                      />
+                      <p>下载地址</p>
+                    </div>
+                  </div>
+                </div>
+                <div  class={classes.friendShip}>
+                  <div class={classes.hotLine}>
+                    <h2>咨询热线</h2>
+                    <p>
+                      400 - 8851569<span>（周一至周五 09:00~21:00）</span>
+                    </p>
+                  </div>
+                  <div class={classes.lineWrap} >
+                    <h2>友情链接</h2>
+                    <div class={classes.itemWrap}>
+                      <div class={classes.friendshipItem} >
+                        <a  target="view_window" href="http://www.chnmusic.org/">
+                          中国音乐家协会
+                        </a>
+                      </div>
+                      <div class={classes.friendshipItem}>
+                        <a
+                          target="view_window"
+                          href="https://www.cnorch.com/leaderInfo/list?leaderType=2"
+                        >
+                          中国音协管乐学会低音铜管专业委员会
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div  class={classes.footerCoptyright}>
+              <div  class={classes.width1200}>
+                <p>
+                  Copyright © 2021 武汉酷乐秀网络科技有限公司
+                  <br /> All Rights Reserved.{' '}
+                  <a target="_blank" href="https://beian.miit.gov.cn/">
+                    鄂ICP备2021020787号-1
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    )
   }
 })

src/components/col-header/index.css

@@ -1,5 +1,18 @@
 
-  .el-menu-item {
+.el-menu-item {
     @apply my-0 mx-4 px-0 !important;
   }
+.topNav {
+  @apply bg-black/[.2]
+  /* background: rgba(0, 0, 0, 0.2); */
+}
+.logoWrap {
+  @apply w-28
+}
 
+.activeItem {
+  @apply text-white  border-b-[3px] border-b-transparent hover:text-[#1FF0C9] hover:border-b-[3px] hover:border-b-[#1FF0C9]
+}
+.itemCenter {
+  @apply text-lg h-full flex items-center box-border
+}

src/components/col-header/index.tsx

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
 import { ElButton } from 'element-plus'
 import './index.css'
+import logo from'./images/logo.png'
 
 export default defineComponent({
   name: 'col-header',
@@ -18,10 +19,12 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class="bg-[#383838]">
+      <div class="topNav">
         <div class="mx-52 flex justify-between items-center h-[70px]">
           <div class="flex items-center h-full">
-            <div class="w-28 h-9 bg-slate-50"></div>
+            <div class="logoWrap">
+              <img class="w-full" src={logo} alt="" />
+            </div>
             <div class="flex space-x-[76px] md:space-x-16 ml-28 sm:ml-20 h-full">
               {this.navigator.map((item: any) => (
                 <a
@@ -34,9 +37,9 @@ export default defineComponent({
                   }}
                   class={[
                     item.current
-                      ? 'text-[#1FF0C9] border-b-4 border-b-[#1FF0C9]'
-                      : 'text-white border-b-4 border-b-transparent hover:text-[#1FF0C9] hover:border-b-4 hover:border-b-[#1FF0C9]',
-                    'text-lg h-full flex items-center box-border'
+                      ? 'text-[#1FF0C9] border-b-[3px] border-b-[#1FF0C9]'
+                      : 'activeItem','itemCenter'
+
                   ]}
                 >
                   {item.name}

src/components/videoDetailItem/index.tsx

@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue'
+
+import classes from './index.module.less'
+import detaile from './images/detaile.png'
+import icon from './images/icon.png'
+export default defineComponent({
+  name: 'albumItem',
+  setup() {
+    return () => (
+      <>
+        <div class={classes.itemWrap}>
+          <img src={detaile} alt="" class={classes.detaile} />
+          <div class={classes.itemBottom}>
+            <div class={classes.itemBottomL}>
+              <img src={icon} alt="" />
+              <span>24首</span>
+            </div>
+            <div class={classes.itemBottomR}>
+              <span>24收藏</span>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/views/home/index.tsx

@@ -1,14 +1,21 @@
-// import { PaperClipIcon } from '@heroicons/vue/solid'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-
-export default defineComponent({
-  name: 'home',
-  render() {
-    return (
-      <div class="bg-white">
-        <div class="container mx-auto">内容</div>
-      </div>
-    )
-  }
-})
+// import { PaperClipIcon } from '@heroicons/vue/solid'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import albumItem from '@/components/albumItem'
+import videoDetailItem from '@/components/videoDetailItem'
+export default defineComponent({
+  name: 'home',
+  components:{
+    albumItem,
+    videoDetailItem
+  },
+  render() {
+    return (
+      <div class="bg-white">
+        <albumItem></albumItem>
+        <videoDetailItem></videoDetailItem>
+        <div class="container mx-auto">内容</div>
+      </div>
+    )
+  }
+})