pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

长视频

pull/40/head
zyronon 1 year ago
parent
4d2b340a9f
commit
8e5ec6a2d4
3 changed files with 294 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/pages/home/index.vue
  2. 143
      src/pages/home/slide/LongVideo.vue
  3. 238
      src/pages/shop/Shop.vue

3
src/pages/home/index.vue
Unescape View File

@ -112,7 +112,7 @@
</SlideItem> </SlideItem>
<Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/> <Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>
<SlideItem> <SlideItem>
<Shop/> <LongVideo/>
</SlideItem> </SlideItem>
<Slide4 :active="state.navIndex === 4 && state.baseIndex === 1"/> <Slide4 :active="state.navIndex === 4 && state.baseIndex === 1"/>
</SlideHorizontal> </SlideHorizontal>
@ -218,6 +218,7 @@ import Slide2 from "@/pages/home/slide/Slide2.vue";
import Slide4 from "@/pages/home/slide/Slide4.vue"; import Slide4 from "@/pages/home/slide/Slide4.vue";
import {DefaultUser} from "@/utils/const_var"; import {DefaultUser} from "@/utils/const_var";
import {$no} from "@/utils"; import {$no} from "@/utils";
import LongVideo from "@/pages/home/slide/LongVideo.vue";
const nav = useNav() const nav = useNav()
const store = useStore() const store = useStore()

143
src/pages/home/slide/LongVideo.vue
Unescape View File

@ -0,0 +1,143 @@
<script setup>
</script>
<template>
<div class="page">
<div class="item"
:class="[
i % 5 === 0 && 'big',
i % 5 === 0 ? '' : (i % 2 === 1 && 'l'),
i % 5 === 0 ? '' : (i % 2 === 0 && 'r'),
]"
v-for="(item,i) in 100">
<video
controls
src="@/assets/video/0.mp4"></video>
<img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="poster">
<div class="title">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<div class="bottom">
<div class="l">
<img v-lazy="`https://cdn.seovx.com/ha/?mom=302&d=${i}`" alt="" class="avatar">
<div class="name">哈哈哈哈</div>
</div>
<div class="r">
<Icon icon="icon-park-outline:like"/>
<div class="num">9.2万</div>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="less">
@import "@/assets/less/index";
.page {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 15rem;
height: calc(100vh - @header-height - @footer-height);
margin-top: @header-height;
overflow: auto;
box-sizing: border-box;
.item {
margin: 0 10rem;
display: flex;
flex-direction: column;
gap: 8rem;
.poster {
border-radius: 12rem;
width: 100%;
height: 140rem;
object-fit: cover;
}
video {
display: none;
height: 220rem;
object-fit: cover;
}
.title {
height: 36rem;
color: white;
font-size: 14rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2; //显示的行
}
.f {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5rem;
}
.bottom {
color: gray;
.f;
font-size: 13rem;
.l {
.f;
.avatar {
@w: 20rem;
width: @w;
height: @w;
object-fit: cover;
border-radius: 50%;
}
}
.r {
.f;
svg {
font-size: 16rem;
}
}
}
&.big {
grid-column-start: 1;
grid-column-end: 3;
margin: 0;
.poster {
display: none;
}
video {
display: block;
}
.title {
height: unset;
-webkit-line-clamp: 1;
}
.title, .bottom {
padding: 0 10rem;
}
}
&.l {
margin-right: 5rem;
}
&.r {
margin-left: 5rem;
}
}
}
</style>

238
src/pages/shop/Shop.vue
Unescape View File

@ -1,40 +1,89 @@
<template> <template>
<div id="Shop"> <div id="Shop">
<div class="bg"> <div class="wrapper">
<div class="top"></div> <div class="search">
<div class="bottom"></div> <div class="search-input">
</div> <Icon icon="tabler:search"/>
<div class="search"> <div class="placeholder">50元话费充值</div>
<div class="search-input"> <Icon color="gray" icon="lucide:camera"/>
<img src="@/assets/img/icon/search-gray.png" alt=""> <div class="search-notice">搜索</div>
<div class="placeholder">50元话费充值</div> </div>
<img src="@/assets/img/icon/scan-gray.png" alt=""> <div class="more">
<div class="search-notice">搜索</div> <Icon icon="ep:shopping-cart"/>
</div> </div>
<div class="more">
<img src="@/assets/img/icon/category-gray.png" alt="">
<span>更多</span>
</div> </div>
</div> </div>
<Scroll class="Scroll" <Scroll class="Scroll"
fixedHeight="100" fixedHeight="100"
@fixed="e=>state.fixed = e" @fixed="e=>state.fixed = e"
@pulldown="loadData"> @pulldown="loadData">
<div class="options"> <div class="wrapper">
<div class="option"> <div class="card">
<img src="@/assets/img/icon/scan-gray.png" alt=""> <div class="options">
<span>我的订单 快捷查单</span> <div class="option" @click="$no">
</div> <Icon icon="lets-icons:order-light"/>
<div class="option"> <div>我的订单</div>
<img src="@/assets/img/icon/scan-gray.png" alt=""> </div>
<span>购物车 空空如也</span> <div class="option" @click="$no">
<Icon icon="material-symbols-light:charging-station-outline"/>
<div>手机充值</div>
</div>
<div class="option" @click="$no">
<Icon icon="lucide:message-square-quote"/>
<div>购物消息</div>
</div>
<div class="option" @click="$no">
<Icon icon="fluent:location-16-regular"/>
<div>小时达</div>
</div>
<div class="option" @click="$no">
<Icon icon="ri:refund-2-fill"/>
<div>退款/售后</div>
</div>
<div class="option" @click="$no">
<Icon icon="icon-park-outline:clothes-turtleneck"/>
<div>潮流服饰</div>
</div>
</div>
</div> </div>
</div> <div class="card" style="margin-bottom: 5rem;">
<div class="navs"> <div class="baiyibutie">
<div class="wrapper"> <div class="item">
<div class="nav" v-for="i in 20">推荐</div> <img src="@/assets/img/icon/shop/baiyibutie.png" alt="">
<span>38节补贴</span>
</div>
<div class="item">
<img src="@/assets/img/icon/shop/1.webp" alt="">
<span class="price">
<span class="m">￥</span>
<span>470</span>
</span>
</div>
<div class="item">
<img src="@/assets/img/icon/shop/2.webp" alt="">
<span class="price">
<span class="m">￥</span>
<span>699</span>
</span>
</div>
<div class="item">
<img src="@/assets/img/icon/shop/3.png" alt="">
<span class="price">
<span class="m">￥</span>
<span>8.8</span>
</span>
</div>
<div class="item">
<img src="@/assets/img/icon/shop/4.jpg" alt="">
<span class="price">
<span class="m">￥</span>
<span>2.99</span>
</span>
</div>
</div>
</div> </div>
</div> </div>
<div v-masonry class="goods-list" <div v-masonry class="goods-list"
:class="{fixed:state.fixed}" :class="{fixed:state.fixed}"
transition-duration="0s" transition-duration="0s"
@ -42,7 +91,7 @@
<div v-masonry-tile class="goods" <div v-masonry-tile class="goods"
@click="nav('/shop/detail')" @click="nav('/shop/detail')"
v-for="(item, index) in state.list"> v-for="(item, index) in state.list">
<div class="card"> <div class="item">
<img class="poster" :src="Utils.$imgPreview(item.cover)"/> <img class="poster" :src="Utils.$imgPreview(item.cover)"/>
<div class="bottom"> <div class="bottom">
<div class="desc"> <div class="desc">
@ -67,12 +116,15 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="jsx">
import {onMounted, reactive} from "vue"; import {onMounted, reactive} from "vue";
import Utils from "@/utils"; import {useNav} from "@/utils/hooks/useNav";
import api from "@/api";
import SlideList from "@/pages/home/slide/SlideList.vue";
import Utils, {$no} from "@/utils";
import Scroll from "@/components/Scroll.vue"; import Scroll from "@/components/Scroll.vue";
import goods from "@/assets/data/goods"; import goods from "@/assets/data/goods";
import {useNav} from "@/utils/hooks/useNav";
const nav = useNav() const nav = useNav()
const state = reactive({ const state = reactive({
@ -110,31 +162,14 @@ onMounted(() => {
#Shop { #Shop {
font-size: 14rem; font-size: 14rem;
color: white;
padding-top: @header-height;
position: relative; position: relative;
background: @fColor; background: @fColor;
background: #f1f1f1;
padding: 10rem 5rem;
color: black;
.bg { .wrapper {
top: 0; padding: 0 5rem;
position: absolute;
width: 100vw;
height: 30vh;
//background: red;
@th: 70%;
@eColor: rgb(32, 28, 58);
.top {
height: @th;
background: linear-gradient(to bottom, rgb(56, 30, 77), @eColor);
}
.bottom {
height: 100% - @th;
background: red;
background: linear-gradient(to bottom, @eColor, @fColor);
}
} }
.search { .search {
@ -142,20 +177,22 @@ onMounted(() => {
z-index: 2; z-index: 2;
display: flex; display: flex;
align-items: center; align-items: center;
height: @header-height; height: 36rem;
padding: 9rem 20rem;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 10rem;
img { svg {
width: 20rem; font-size: 22rem;
} }
.search-input { .search-input {
border: 3rem solid rgb(140, 48, 74); border: 1rem solid rgb(140, 48, 74);
border-radius: 8rem; border-radius: 8rem;
height: 100%; height: 100%;
padding: 0 10rem; padding: 0 10rem;
padding-right: 3rem;
flex: 1; flex: 1;
gap: 10rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -168,12 +205,19 @@ onMounted(() => {
} }
.search-notice { .search-notice {
color: rgb(242, 62, 92); background: rgb(242, 62, 92);
padding: 0 10rem;
height: 85%;
border-radius: 6rem;
display: flex;
justify-content: center;
align-items: center;
color: white;
} }
} }
.more { .more {
margin-left: 20rem; margin-left: 10rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -182,50 +226,66 @@ onMounted(() => {
} }
} }
.card {
background: white;
padding: 10rem 15rem;
margin-bottom: 10rem;
border-radius: 8rem;
}
.options { .options {
display: grid; display: flex;
grid-template-columns: 1fr 1fr; overflow-x: auto;
gap: 20rem;
height: 40rem;
padding: 4rem 20rem;
box-sizing: border-box; box-sizing: border-box;
img {
width: 20rem;
margin-right: 10rem;
}
.option { .option {
width: 17vw;
flex-shrink: 0;
font-size: 13rem; font-size: 13rem;
flex: 1;
display: flex; display: flex;
background: rgb(63, 58, 78); flex-direction: column;
padding: 6rem 8rem; justify-content: center;
border-radius: 6rem; align-items: center;
svg {
font-size: 30rem;
margin-bottom: 3rem;
}
} }
} }
.navs { .baiyibutie {
overflow: auto; display: flex;
padding: 0 10rem;
.wrapper { .item {
display: flex; display: flex;
//flex-wrap: wrap; flex-direction: column;
} justify-content: center;
align-items: center;
width: 25%;
font-size: 12rem;
color: gray;
.nav { img {
margin: 10rem; width: 80%;
word-break: keep-all; }
//border-bottom: 2rem solid white;
.price {
color: red;
font-size: 16rem;
font-weight: bold;
.m {
font-size: 10rem;
}
}
} }
} }
.Scroll { .Scroll {
position: relative; position: relative;
z-index: 2; z-index: 2;
//height: calc(100vh - @header-height) !important; height: calc(100vh - @footer-height * 2) !important;
height: calc(100vh - @header-height * 2 - @footer-height) !important;
} }
.fixed { .fixed {
@ -235,15 +295,15 @@ onMounted(() => {
@p: 5rem; @p: 5rem;
.goods-list { .goods-list {
padding: @p; padding-bottom: 20rem;
} }
.goods { .goods {
width: calc(50% - @p); width: 50%;
box-sizing: border-box; box-sizing: border-box;
padding: 5rem; padding: 5rem;
.card { .item {
border-radius: 8rem; border-radius: 8rem;
overflow: hidden; overflow: hidden;
background: white; background: white;
@ -307,4 +367,4 @@ onMounted(() => {
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save