feat: idx-content

src/components/IndexNews/index.vue

@@ -0,0 +1,67 @@
+<script setup name="IndexNews">
+
+const a = 1
+
+</script>
+
+<template>
+  <div class="index-news-container">
+    <div class="imgbox">
+      <img src="https://dummyimage.com/279x155/e3e3e3/fff" alt="">
+    </div>
+    <div class="content">
+      <div class="title ellipsis-two">
+        含《极乐迪斯科 最终剪辑版》及《哥谭骑士》：索尼公布10月PS+含《极乐迪斯科 最终剪辑版》及《哥谭骑士》：索尼公布10月PS+
+      </div>
+      <div class="footer flex-row flex-aic flex-jc-sb">
+        <span>54分钟前</span>
+        <div><span>324喜欢</span>·<span>5233评论</span></div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.index-news {
+  &-container {
+    background-color: #fff;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .imgbox {
+      width: 279px;
+      height: 155px;
+      background: #eee;
+      border-radius: 6px 6px 0px 0px;
+    }
+
+    .content {
+      padding: 16px 10px;
+
+      .title {
+        width: calc(279px - 20px);
+        height: 44px;
+        font-size: 16px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 22px;
+        margin-bottom: 16px;
+      }
+
+      .footer {
+        height: 20px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #777777;
+        line-height: 15px;
+
+        div {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/IndexSection/index.vue

@@ -0,0 +1,179 @@
+<script setup name="IndexSection">
+
+import SvgIcon from '~/components/SvgIcon/index.vue'
+
+const Props = defineProps({
+  type: {
+    type: String,
+    validator: key => (['article', 'common'].includes(key)),
+    default: 'common'
+  }
+})
+
+</script>
+
+<template>
+  <div class="index-section-container">
+    <div v-if="type === 'common'" class="imgbox">
+      <img src="https://dummyimage.com/279x155/e3e3e3/fff" alt="" />
+    </div>
+    <div v-else class="article-wrapper">
+      <div class="title ellipsis-two">
+        {{ type }}VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄
+      </div>
+      <p class="desc">
+        互动式影视作品《寂静岭：升天》(Silent Hill: Ascension)  今日放出了新的宣传预告，并宣布将于11月1日登陆 App Store、Google Play 和官方网页平台。《寂静岭：升天》是寂静岭系列衍生的互动影视作品，玩家们的选择则会决定主角们的命运。 
+      </p>
+    </div>
+
+    <div class="content">
+      <div v-if="type === 'common'" class="title ellipsis-two">
+        {{ type }}VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄
+      </div>
+      <div class="flag">
+        #话题名称
+      </div>
+
+      <div class="moment-user flex-row flex-aic flex-jc-sb">
+        <div class="left flex-row flex-aic">
+          <div class="avatar">
+            <img src="https://dummyimage.com/20x20/e3e3e3/fff" alt="" />
+          </div>
+          <div class="nickname ellipsis">上海xxxxx公司</div>
+        </div>
+        <div class="ago">1个小时前</div>
+      </div>
+
+      <div class="footer">
+        <ul class="flex-row flex-aic flex-jc-sb">
+          <li class="active">
+            <SvgIcon name="like" :size="16" :rgap="2" color="#00b0b0" />
+            <span>22.3W</span>
+          </li>
+          <li class="active">
+            <SvgIcon name="collect" :size="16" :rgap="2" color="#00b0b0" />
+            <span>98698</span>
+          </li>
+          <li>
+            <SvgIcon name="message" :size="16" :rgap="2" color="#999999" />
+            <span>2354</span>
+          </li>
+          <li>
+            <SvgIcon name="forward" :size="16" :rgap="2" color="#999999" />
+            <span>40W</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.index-section {
+  &-container {
+    width: 279px;
+    height: 337px;
+    background-color: #fff;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .imgbox {
+      width: 279px;
+      height: 155px;
+      background: #eee;
+      border-radius: 6px 6px 0px 0px;
+    }
+
+    .article-wrapper {
+      padding: 14px 10px 0;
+      height: 201px;
+      /* height: 187px; */
+      .title {
+        margin-bottom: 16px;
+      }
+      .desc {
+        margin: 0;
+        padding: 0;
+        font-size: 14px;
+        height: calc(100% - 60px);
+        line-height: 1.44;
+        overflow: hidden;
+      }
+    }
+    
+    .title {
+      width: calc(279px - 20px);
+      height: 44px;
+      font-size: 16px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      line-height: 22px;
+      margin-bottom: 16px;
+    }
+
+    .content {
+      padding: 16px 10px;
+
+      .flag {
+        height: 30px;
+        line-height: 30px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #FF6700;
+      }
+
+      .moment-user {
+        height: 30px;
+        .left {
+          width: 0;
+          flex: 1;
+        }
+        .avatar {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          overflow: hidden;
+        }
+        .nickname {
+          flex: 1;
+          padding:0 10px 0 8px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #444444;
+        }
+        .ago {
+          height: 17px;
+          font-size: 12px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          color: #888888;
+          line-height: 17px;
+        }
+      }
+      .footer {
+        height: 30px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 30px;
+        ul {
+          padding: 0;
+          margin: 0;
+          list-style: none;
+          li {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &.active {
+              color: #00b0b0;
+            }
+          }
+        }
+      }
+    }
+
+  }
+}
+</style>

src/components/IndexTitle/index.vue

@@ -28,7 +28,7 @@ const Emits = defineEmits(['seeMore'])
 @import "~/styles/variable.scss";
 
 .index-title-container {
-  padding-left: 18px;
+  padding-left: 16px;
   border-left: 4px solid $color-primary;
 
   .title {

src/components/SvgIcon/index.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup name="SvgIcon">
 import { computed } from 'vue'
 
 const Props = defineProps({

src/components/layouts/Footer.vue

@@ -0,0 +1,13 @@
+
+<template>
+  <div class="layout-footer-container">
+
+  </div>
+</template>
+
+<script lang="scss" scoped>
+.layout-footer-container {
+
+}
+
+</script>

src/views/index-content.vue

@@ -1,5 +1,7 @@
 <script setup>
 import IndexTitle from "~/components/IndexTitle/index.vue";
+import IndexNews from "~/components/IndexNews/index.vue";
+import IndexSection from "~/components/IndexSection/index.vue";
 
 </script>
 
@@ -14,19 +16,51 @@ import IndexTitle from "~/components/IndexTitle/index.vue";
       </el-carousel>
     </div>
     <IndexTitle title="精选咨询" />
+    <div class="content-list flex-row flex-jc-sb">
+      <template v-for="(item, idx) in 9" :key="idx">
+        <IndexNews />
+      </template>
+    </div>
+    <IndexTitle title="精选咨询" />
+    <div class="content-list content-list--c2 flex-row flex-jc-sb">
+      <template v-for="(item, idx) in 9" :key="idx">
+        <IndexSection :type="idx === 2 ? 'article' : 'common'"/>
+      </template>
+    </div>
+    <IndexTitle title="精选视频" />
+    <div class="content-list content-list--c2 flex-row flex-jc-sb">
+      <template v-for="(item, idx) in 9" :key="idx">
+        <IndexSection />
+      </template>
+    </div>
+    <IndexTitle title="大家在聊" />
+    <div class="tags-container flex-row">
+      <template v-for="(item, idx) in 19" :key="idx">
+        <div class="tagbox">
+          <span>
+            精选视频 {{ item }}
+          </span>
+        </div>
+      </template>
+    </div>
     test page.
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .index {
   &-container {
-
     .banner {
+      margin-bottom: 30px;
+
       .demonstration {
         color: var(--el-text-color-secondary);
       }
 
+      .el-carousel__item {
+        border-radius: 6px;
+      }
+
       .el-carousel__item h3 {
         color: #475669;
         opacity: 0.75;
@@ -44,6 +78,44 @@ import IndexTitle from "~/components/IndexTitle/index.vue";
       }
     }
 
+    .index-title-container {
+      margin-bottom: 20px;
+    }
+
+    .content-list {
+      margin-bottom: 30px;
+      column-gap: 20px;
+      flex-wrap: wrap;
+      height: 255px;
+      overflow: hidden;
+      &--c2 {
+        height: 337px;
+      }
+    }
+  }
+}
+
+.tags {
+  &-container {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    padding: 30px 0 0;
+    height: 142px;
+    overflow: hidden;
+
+    .tagbox {
+      width: 279px;
+      height: 56px;
+      text-align: center;
+      line-height: 56px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      margin-right: 22px;
+      margin-bottom: 16px;
+      span::before {
+        content: "#";
+      }
+    }
   }
 }
 </style>