优化
This commit is contained in:
zyronon
parent
b667211da7
commit
1536e09034
@ -42,8 +42,8 @@
|
||||
<script crossorigin="anonymous"
|
||||
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
||||
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
|
||||
<!-- <script src="//cdn.jsdelivr.net/npm/eruda"></script>-->
|
||||
<!-- <script>eruda.init();</script>-->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.min.js"></script>
|
||||
<script>eruda.init();</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -50,9 +50,9 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.onresize = () => {
|
||||
location.reload()
|
||||
}
|
||||
// window.onresize = () => {
|
||||
// location.reload()
|
||||
// }
|
||||
// this.$store.dispatch('getFriends')
|
||||
try {
|
||||
navigator.control.gesture(false);
|
||||
|
||||
@ -1,113 +1,315 @@
|
||||
<template>
|
||||
<div id="friend">
|
||||
<header ref="header">
|
||||
<div class="new">
|
||||
<img src="@/assets/img/icon/add-light.png" alt="">
|
||||
<div id="Shop">
|
||||
<div class="bg">
|
||||
<div class="top"></div>
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="search-input">
|
||||
<img src="@/assets/img/icon/search-gray.png" alt="">
|
||||
<div class="placeholder">50元话费充值</div>
|
||||
<img src="@/assets/img/icon/scan-gray.png" alt="">
|
||||
<div class="search-notice">搜索</div>
|
||||
</div>
|
||||
<img class="center" src="@/assets/img/icon/add-light.png" alt="">
|
||||
<img class='right' src="@/assets/img/icon/search-light.png" alt="" @click="nav('/home/search')">
|
||||
</header>
|
||||
<SlideList
|
||||
style="background:#000;"
|
||||
:active="true"
|
||||
:api="api.videos.recommended"
|
||||
/>
|
||||
<div class="more">
|
||||
<img src="@/assets/img/icon/category-gray.png" alt="">
|
||||
<span>更多</span>
|
||||
</div>
|
||||
</div>
|
||||
<Scroll class="Scroll"
|
||||
fixedHeight="100"
|
||||
@fixed="e=>state.fixed = e"
|
||||
@pulldown="loadData">
|
||||
<div class="options">
|
||||
<div class="option">
|
||||
<img src="@/assets/img/icon/scan-gray.png" alt="">
|
||||
<span>我的订单 快捷查单</span>
|
||||
</div>
|
||||
<div class="option">
|
||||
<img src="@/assets/img/icon/scan-gray.png" alt="">
|
||||
<span>购物车 空空如也</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navs">
|
||||
<div class="wrapper">
|
||||
<div class="nav" v-for="i in 20">推荐</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-masonry class="goods-list"
|
||||
:class="{fixed:state.fixed}"
|
||||
transition-duration="0s"
|
||||
item-selector=".goods">
|
||||
<div v-masonry-tile class="goods"
|
||||
@click="nav('/shop/detail')"
|
||||
v-for="(item, index) in state.list">
|
||||
<div class="card">
|
||||
<img class="poster" :src="Utils.$imgPreview(item.cover)"/>
|
||||
<div class="bottom">
|
||||
<div class="desc">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="discounts" v-if="item.discount">{{ item.discount }}</div>
|
||||
<div class="info">
|
||||
<div class="price">
|
||||
￥
|
||||
<div class="big">{{ item.price }}</div>
|
||||
</div>
|
||||
<div class="num">已售{{ item.sold }}件</div>
|
||||
</div>
|
||||
<div class="low" v-if="item.isLowPrice">
|
||||
近30天低价
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Scroll>
|
||||
<Footer v-bind:init-tab="2" style="position: fixed;"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
|
||||
import {reactive} from "vue";
|
||||
import {onMounted, reactive} from "vue";
|
||||
import {useNav} from "@/utils/hooks/useNav";
|
||||
import api from "@/api";
|
||||
import SlideList from "@/pages/home/slide/SlideList.vue";
|
||||
import Utils from "@/utils";
|
||||
import Scroll from "@/components/Scroll.vue";
|
||||
import goods from "@/assets/data/goods";
|
||||
|
||||
const nav = useNav()
|
||||
|
||||
const state = reactive({
|
||||
baseIndex: 0,
|
||||
navIndex: 4,
|
||||
itemIndex: 0,
|
||||
test: '',
|
||||
recommendVideos: [
|
||||
// {
|
||||
// type: 'img',
|
||||
// src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
// },
|
||||
{
|
||||
type: 'imgs',
|
||||
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
},
|
||||
{
|
||||
type: 'user',
|
||||
src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
},
|
||||
],
|
||||
|
||||
isSharing: false,
|
||||
canMove: true,
|
||||
loading: false,
|
||||
isUp: false,
|
||||
|
||||
shareType: -1,
|
||||
|
||||
showPlayFeedback: false,
|
||||
showShareDuoshan: false,
|
||||
showShareDialog: false,
|
||||
showShare2WeChatZone: false,
|
||||
showDouyinCode: false,
|
||||
showFollowSetting: false,
|
||||
showFollowSetting2: false,
|
||||
showBlockDialog: false,
|
||||
showChangeNote: false,
|
||||
shareToFriend: false,
|
||||
|
||||
commentVisible: false,
|
||||
fullScreen: false,
|
||||
subType: -1,
|
||||
//用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
|
||||
subTypeIsTop: false,
|
||||
totalSize: 0,
|
||||
pageSize: 10,
|
||||
pageNo: 0,
|
||||
list: goods.list,
|
||||
listEl: null,
|
||||
fixed: false
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/less/index";
|
||||
|
||||
#friend {
|
||||
//抖音原色，感觉很暗
|
||||
@douyin-bg: #2e3244;
|
||||
background: @douyin-bg;
|
||||
color: #b8b9c1;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
//overflow: auto;
|
||||
|
||||
header {
|
||||
height: @header-height;
|
||||
padding: 20rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 25rem;
|
||||
function loadData() {
|
||||
console.log('loadData')
|
||||
for (let i = 1; i < 12; i++) {
|
||||
let temp = {
|
||||
src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
|
||||
author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
|
||||
}
|
||||
}
|
||||
|
||||
#VInfinite {
|
||||
height: calc(100% - @header-height);
|
||||
// state.list.push(temp)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
for (let i = 1; i < 12; i++) {
|
||||
let temp = {
|
||||
src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
|
||||
author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
|
||||
}
|
||||
// state.list.push(temp)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
@fColor: #f1f1f1;
|
||||
|
||||
#Shop {
|
||||
font-size: 14rem;
|
||||
color: white;
|
||||
padding-top: @header-height;
|
||||
position: relative;
|
||||
background: @fColor;
|
||||
|
||||
.bg {
|
||||
top: 0;
|
||||
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 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: @header-height;
|
||||
padding: 9rem 20rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border: 3rem solid rgb(140, 48, 74);
|
||||
border-radius: 8rem;
|
||||
height: 100%;
|
||||
padding: 0 10rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.placeholder {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.search-notice {
|
||||
color: rgb(242, 62, 92);
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-left: 20rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rem;
|
||||
height: 40rem;
|
||||
padding: 4rem 20rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
.option {
|
||||
font-size: 13rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
background: rgb(63, 58, 78);
|
||||
padding: 6rem 8rem;
|
||||
border-radius: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navs {
|
||||
overflow: auto;
|
||||
padding: 0 10rem;
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
//flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin: 10rem;
|
||||
word-break: keep-all;
|
||||
//border-bottom: 2rem solid white;
|
||||
}
|
||||
}
|
||||
|
||||
.Scroll {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
//height: calc(100vh - @header-height) !important;
|
||||
height: calc(100vh - @header-height * 2 - @footer-height) !important;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
background: @fColor;
|
||||
}
|
||||
|
||||
@p: 5rem;
|
||||
|
||||
.goods-list {
|
||||
padding: @p;
|
||||
}
|
||||
|
||||
.goods {
|
||||
width: calc(50% - @p);
|
||||
box-sizing: border-box;
|
||||
padding: 5rem;
|
||||
|
||||
.card {
|
||||
border-radius: 8rem;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding: 10rem;
|
||||
|
||||
.desc {
|
||||
color: black;
|
||||
font-size: 16rem;
|
||||
margin-bottom: 8rem;
|
||||
@lh: 18rem;
|
||||
line-height: @lh;
|
||||
height: @lh * 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.discounts {
|
||||
display: inline-block;
|
||||
@c: rgb(199, 89, 106);
|
||||
border: 1rem solid @c;
|
||||
padding: 0 4rem;
|
||||
color: @c;
|
||||
font-size: 12rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.price {
|
||||
color: rgb(248, 38, 74);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 14rem;
|
||||
margin-right: 5rem;
|
||||
|
||||
.big {
|
||||
font-size: 22rem;
|
||||
font-weight: bold;
|
||||
transform: translateY(2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
color: darkgray;
|
||||
font-size: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.low {
|
||||
margin-top: 2rem;
|
||||
color: rgb(230, 153, 92);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -22,31 +22,29 @@
|
||||
</SlideHorizontal>
|
||||
</div>
|
||||
<div class="float">
|
||||
<img class="close" src="../../assets/img/icon/close-white.png" alt="" @click="$back">
|
||||
<Icon class="close" icon="mingcute:close-line" @click="$back"/>
|
||||
<div class="choose-music">
|
||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
||||
<Icon icon="vaadin:music"/>
|
||||
<span>选择音乐</span>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<div class="tool" @click.stop="$emit('showComments')">
|
||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
||||
<span>翻转</span>
|
||||
<Icon icon="tabler:refresh"/>
|
||||
</div>
|
||||
<div class="tool" @click.stop="$emit('showComments')">
|
||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
||||
<span>快慢速</span>
|
||||
<Icon icon="pepicons-pop:electricity-off"/>
|
||||
</div>
|
||||
<div class="tool" @click.stop="$emit('showComments')">
|
||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
||||
<span>滤镜</span>
|
||||
<Icon icon="lets-icons:setting-fill"/>
|
||||
</div>
|
||||
<div class="tool" @click.stop="$emit('showComments')">
|
||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
||||
<span>美化</span>
|
||||
<Icon icon="bxs:alarm"/>
|
||||
</div>
|
||||
<div class="tool" @click.stop="$emit('showComments')">
|
||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
||||
<span>倒计时</span>
|
||||
<Icon icon="fluent:pen-sparkle-16-filled"/>
|
||||
</div>
|
||||
<div class="tool" @click.stop="$emit('showComments')">
|
||||
<Icon icon="ri:color-filter-fill"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -55,6 +53,25 @@
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
|
||||
//访问用户媒体设备的兼容方法
|
||||
function getUserMedia(constrains, success, error) {
|
||||
if (navigator.mediaDevices.getUserMedia) {
|
||||
//最新标准API
|
||||
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
|
||||
} else if (navigator.webkitGetUserMedia) {
|
||||
//webkit内核浏览器
|
||||
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
|
||||
} else if (navigator.mozGetUserMedia) {
|
||||
//Firefox浏览器
|
||||
navagator.mozGetUserMedia(constrains).then(success).catch(error);
|
||||
} else if (navigator.getUserMedia) {
|
||||
//旧版API
|
||||
navigator.getUserMedia(constrains).then(success).catch(error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
name: "Publish",
|
||||
data() {
|
||||
@ -73,14 +90,15 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getMedia() {
|
||||
let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
|
||||
let promise = navigator.mediaDevices.getUserMedia(constraints);
|
||||
promise.then((MediaStream) => {
|
||||
// let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
|
||||
// let constraints = {video:{width:480,height:320}, audio: false};
|
||||
let constraints = {video: true, audio: false};
|
||||
getUserMedia(constraints, (MediaStream) => {
|
||||
this.video.srcObject = MediaStream;
|
||||
this.video.play();
|
||||
}).catch(function (PermissionDeniedError) {
|
||||
}, function (PermissionDeniedError) {
|
||||
console.log(PermissionDeniedError);
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -122,11 +140,10 @@ export default {
|
||||
height: calc(100% - 60px);
|
||||
|
||||
.close {
|
||||
font-size: 28rem;
|
||||
position: absolute;
|
||||
left: 20rem;
|
||||
top: 20rem;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
.choose-music {
|
||||
@ -139,8 +156,10 @@ export default {
|
||||
padding: 5rem 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14rem;
|
||||
|
||||
img {
|
||||
svg {
|
||||
font-size: 30rem;
|
||||
margin-right: 5rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
@ -157,13 +176,7 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20rem;
|
||||
font-size: 10rem;
|
||||
|
||||
img {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
font-size: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -342,13 +342,13 @@
|
||||
.heat {
|
||||
color: @second-text-color;
|
||||
display: flex;
|
||||
gap: 30rem;
|
||||
gap: 26rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.num {
|
||||
color: white;
|
||||
font-size: 15rem;
|
||||
font-size: 14rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
<div class="item"
|
||||
:style="floatFixed?'opacity: 0;':''"
|
||||
@click="$no">
|
||||
@click="$nav('/message/visitors')">
|
||||
<Icon icon="eva:people-outline"/>
|
||||
</div>
|
||||
<div class="item" @click="$no">
|
||||
|
||||
@ -1,17 +1,13 @@
|
||||
<template>
|
||||
<div id="Message" ref="app" :class="createChatDialog?'disable-scroll':''">
|
||||
<div class="no-search" v-show="!searching">
|
||||
<BaseHeader :isFixed="false">
|
||||
<template v-slot:center>
|
||||
<span class="f16">消息</span>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<span class="f14" @click="createChatDialog = true">创建群聊</span>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<header>
|
||||
<Icon @click="createChatDialog = true" icon="formkit:add"/>
|
||||
<Icon icon="tabler:camera-selfie" />
|
||||
<Icon @click="searching = true" icon="tabler:search"/>
|
||||
</header>
|
||||
|
||||
<Scroll ref="mainScroll">
|
||||
<Search class="ml2r mr2r mb2r" @click="searching = true"></Search>
|
||||
<div class="friends pl1r ">
|
||||
<div class="friend pr1r pl1r"
|
||||
@click="$nav('/message/chat')"
|
||||
@ -512,6 +508,19 @@ export default {
|
||||
.no-search {
|
||||
height: 100vh;
|
||||
|
||||
> header {
|
||||
padding: 0 20rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: @header-height;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #cccccc11;
|
||||
position: relative;
|
||||
font-size: 24rem;
|
||||
|
||||
}
|
||||
|
||||
.create-chat-wrapper {
|
||||
min-height: 70vh;
|
||||
padding-bottom: 60rem;
|
||||
@ -756,6 +765,7 @@ export default {
|
||||
|
||||
.scroll {
|
||||
height: calc(100% - @header-height - @footer-height);
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.friends {
|
||||
@ -837,7 +847,7 @@ export default {
|
||||
.head-image {
|
||||
margin-left: 20rem;
|
||||
margin-right: 15rem;
|
||||
@width: 45rem;
|
||||
@width: 55rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
|
||||
@ -67,7 +67,8 @@ import Uploader from "../pages/me/Uploader";
|
||||
import GoodsDetail from "@/pages/shop/GoodsDetail.vue";
|
||||
|
||||
const routes = [
|
||||
{path: '/', redirect: '/home'},
|
||||
{path: '/', redirect: '/attention'},
|
||||
// {path: '/', redirect: '/home'},
|
||||
{path: '/test', component: Test},
|
||||
{path: '/test4', component: Test4},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user