Browse Source

save

pull/40/head
zyronon 1 year ago
parent
commit
9ae2eb5616
  1. 2
      src/components/Footer.vue
  2. 176
      src/pages/home/index.vue
  3. 4
      src/utils/index.jsx

2
src/components/Footer.vue

@ -87,7 +87,7 @@ export default { @@ -87,7 +87,7 @@ export default {
font-size: 14rem;
position: fixed;
width: 100%;
height: 50rem;
height: @footer-height;
//border-top: 1px solid #7b7878;
z-index: 2;
//bottom0vuetransition

176
src/pages/home/index.vue

@ -2,8 +2,95 @@ @@ -2,8 +2,95 @@
<div class="test-slide-wrapper" id="home-index">
<SlideHorizontal v-model:index="state.baseIndex">
<SlideItem class="sidebar">
<div class="header">
<div class="left">下午好</div>
<div class="right"
@click="nav('/home/live')">
<Icon icon="iconamoon:scanner"/>
<span>扫一扫</span>
</div>
</div>
<div class="card">
<div class="header">
<div class="left">常用小程序</div>
<div class="right">
<span>全部</span>
<Icon icon="icon-park-outline:right"/>
</div>
</div>
<div class="content">
<div class="item" @click="$no">
<img class="xcx"
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/tt-icon.png"
alt="">
<span>今日头条</span>
</div>
<div class="item" @click="$no">
<img class="xcx"
src="https://gd-hbimg.huaban.com/65130a3e6a139530bb03bd118e21a2603af7df4e1303b-OOzcBu_fw658webp"
alt="">
<span>西瓜视频</span>
</div>
</div>
</div>
<div class="card">
<div class="header">
<div class="left">最近常看</div>
<div class="right">
<span>全部</span>
<Icon icon="icon-park-outline:right"/>
</div>
</div>
<div class="content">
<div class="item avatar" @click="$no" v-for="i in 6">
<img
src="https://img.tol.vip/avatar/WEIXIN/3aSuTGYTzjHvcHy0y0tH1eiShKRk9Sgd.jpg?_upt=de4a5c251709635127"/>
<span>随机名字</span>
</div>
</div>
</div>
<div class="card">
<div class="header">
<div class="left">常用功能</div>
<div class="right">
</div>
</div>
<div class="content">
<div class="item" @click="$no">
<Icon icon="ion:wallet-outline"/>
<span>我的钱包</span>
</div>
<div class="item" @click="$no">
<Icon icon="mingcute:coupon-line"/>
<span>券包</span>
</div>
<div class="item" @click="$no">
<Icon icon="icon-park-outline:bytedance-applets"/>
<span>小程序</span>
</div>
<div class="item" @click="$no">
<Icon icon="solar:history-linear"/>
<span>观看历史</span>
</div>
<div class="item" @click="$no">
<Icon icon="fluent:content-settings-24-regular"/>
<span>内容偏好</span>
</div>
<div class="item" @click="$no">
<Icon icon="iconoir:cloud-download"/>
<span>离线模式</span>
</div>
<div class="item" @click="$no">
<Icon icon="ep:setting"/>
<span>设置</span>
</div>
<div class="item" @click="$no">
<Icon icon="icon-park-outline:baggage-delay"/>
<span>稍后再看</span>
</div>
</div>
</div>
</SlideItem>
<SlideItem>
@ -130,6 +217,7 @@ import Slide0 from "@/pages/home/slide/Slide0.vue"; @@ -130,6 +217,7 @@ import Slide0 from "@/pages/home/slide/Slide0.vue";
import Slide2 from "@/pages/home/slide/Slide2.vue";
import Slide4 from "@/pages/home/slide/Slide4.vue";
import {DefaultUser} from "@/utils/const_var";
import {$no} from "@/utils";
const nav = useNav()
const store = useStore()
@ -252,7 +340,93 @@ function dislike() { @@ -252,7 +340,93 @@ function dislike() {
width: 75vw;
height: 100vh;
overflow: auto;
background: red;
background: rgb(22, 22, 22);
padding: 10rem;
box-sizing: border-box;
& > .header {
font-size: 16rem;
display: flex;
color: white;
justify-content: space-between;
align-items: center;
.right {
border-radius: 20rem;
padding: 8rem 15rem;
background: rgb(36, 36, 36);
display: flex;
align-items: center;
font-size: 14rem;
gap: 10rem;
svg {
font-size: 18rem;
}
}
}
.card {
margin-top: 20rem;
border-radius: 12rem;
padding: 15rem;
background: rgb(29, 29, 29);
.header {
margin-bottom: 16rem;
font-size: 14rem;
display: flex;
color: white;
justify-content: space-between;
align-items: center;
.right {
display: flex;
align-items: center;
font-size: 14rem;
gap: 4rem;
color: gray;
svg {
font-size: 18rem;
}
}
}
.content {
color: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
.item {
min-height: 20vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16rem;
gap: 8rem;
svg {
font-size: 30rem;
}
.xcx {
border-radius: 12rem;
width: 55rem;
}
}
.avatar {
height: 25vw;
img {
border-radius: 50%;
width: 55rem;
}
}
}
}
}
.slide-content {

4
src/utils/index.jsx

@ -6,9 +6,8 @@ import Loading from "../components/Loading.vue"; @@ -6,9 +6,8 @@ import Loading from "../components/Loading.vue";
import Config from '../config'
import NoticeDialog from "../components/dialog/NoticeDialog";
import dayjs from 'dayjs'
import bus from "./bus";
import bus, {EVENT_KEY} from "./bus";
import {cloneDeep} from "lodash";
import {EVENT_KEY} from "./bus";
const Utils = {
require2(url) {
@ -430,6 +429,7 @@ export default Utils @@ -430,6 +429,7 @@ export default Utils
export function $no() {
Utils.$no(arguments)
}
export function $notice(val) {
Utils.$notice(val)
}
Loading…
Cancel
Save