优化
This commit is contained in:
zyronon
parent
b667211da7
commit
1536e09034
@ -42,8 +42,8 @@
|
|||||||
<script crossorigin="anonymous"
|
<script crossorigin="anonymous"
|
||||||
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
||||||
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
|
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
|
||||||
<!-- <script src="//cdn.jsdelivr.net/npm/eruda"></script>-->
|
<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.min.js"></script>
|
||||||
<!-- <script>eruda.init();</script>-->
|
<script>eruda.init();</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@ -50,9 +50,9 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.onresize = () => {
|
// window.onresize = () => {
|
||||||
location.reload()
|
// location.reload()
|
||||||
}
|
// }
|
||||||
// this.$store.dispatch('getFriends')
|
// this.$store.dispatch('getFriends')
|
||||||
try {
|
try {
|
||||||
navigator.control.gesture(false);
|
navigator.control.gesture(false);
|
||||||
|
|||||||
@ -1,113 +1,315 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="friend">
|
<div id="Shop">
|
||||||
<header ref="header">
|
<div class="bg">
|
||||||
<div class="new">
|
<div class="top"></div>
|
||||||
<img src="@/assets/img/icon/add-light.png" alt="">
|
<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>
|
</div>
|
||||||
<img class="center" src="@/assets/img/icon/add-light.png" alt="">
|
<div class="more">
|
||||||
<img class='right' src="@/assets/img/icon/search-light.png" alt="" @click="nav('/home/search')">
|
<img src="@/assets/img/icon/category-gray.png" alt="">
|
||||||
</header>
|
<span>更多</span>
|
||||||
<SlideList
|
</div>
|
||||||
style="background:#000;"
|
</div>
|
||||||
:active="true"
|
<Scroll class="Scroll"
|
||||||
:api="api.videos.recommended"
|
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;"/>
|
<Footer v-bind:init-tab="2" style="position: fixed;"/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="jsx">
|
<script setup lang="jsx">
|
||||||
|
|
||||||
import {reactive} from "vue";
|
import {onMounted, reactive} from "vue";
|
||||||
import {useNav} from "@/utils/hooks/useNav";
|
import {useNav} from "@/utils/hooks/useNav";
|
||||||
import api from "@/api";
|
import api from "@/api";
|
||||||
import SlideList from "@/pages/home/slide/SlideList.vue";
|
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 nav = useNav()
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
baseIndex: 0,
|
list: goods.list,
|
||||||
navIndex: 4,
|
listEl: null,
|
||||||
itemIndex: 0,
|
fixed: false
|
||||||
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,
|
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
function loadData() {
|
||||||
|
console.log('loadData')
|
||||||
<style scoped lang="less">
|
for (let i = 1; i < 12; i++) {
|
||||||
@import "../../assets/less/index";
|
let temp = {
|
||||||
|
src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
|
||||||
#friend {
|
author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
|
||||||
//抖音原色，感觉很暗
|
|
||||||
@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;
|
|
||||||
}
|
}
|
||||||
}
|
// state.list.push(temp)
|
||||||
|
|
||||||
#VInfinite {
|
|
||||||
height: calc(100% - @header-height);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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>
|
</style>
|
||||||
|
|||||||
@ -22,31 +22,29 @@
|
|||||||
</SlideHorizontal>
|
</SlideHorizontal>
|
||||||
</div>
|
</div>
|
||||||
<div class="float">
|
<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">
|
<div class="choose-music">
|
||||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
<Icon icon="vaadin:music"/>
|
||||||
<span>选择音乐</span>
|
<span>选择音乐</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<div class="tool" @click.stop="$emit('showComments')">
|
<div class="tool" @click.stop="$emit('showComments')">
|
||||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
<Icon icon="tabler:refresh"/>
|
||||||
<span>翻转</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tool" @click.stop="$emit('showComments')">
|
<div class="tool" @click.stop="$emit('showComments')">
|
||||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
<Icon icon="pepicons-pop:electricity-off"/>
|
||||||
<span>快慢速</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tool" @click.stop="$emit('showComments')">
|
<div class="tool" @click.stop="$emit('showComments')">
|
||||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
<Icon icon="lets-icons:setting-fill"/>
|
||||||
<span>滤镜</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tool" @click.stop="$emit('showComments')">
|
<div class="tool" @click.stop="$emit('showComments')">
|
||||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
<Icon icon="bxs:alarm"/>
|
||||||
<span>美化</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tool" @click.stop="$emit('showComments')">
|
<div class="tool" @click.stop="$emit('showComments')">
|
||||||
<img src="../../assets/img/icon/close-white.png" alt="">
|
<Icon icon="fluent:pen-sparkle-16-filled"/>
|
||||||
<span>倒计时</span>
|
</div>
|
||||||
|
<div class="tool" @click.stop="$emit('showComments')">
|
||||||
|
<Icon icon="ri:color-filter-fill"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -55,6 +53,25 @@
|
|||||||
<script>
|
<script>
|
||||||
import {mapState} from "vuex";
|
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 {
|
export default {
|
||||||
name: "Publish",
|
name: "Publish",
|
||||||
data() {
|
data() {
|
||||||
@ -73,14 +90,15 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getMedia() {
|
getMedia() {
|
||||||
let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
|
// let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
|
||||||
let promise = navigator.mediaDevices.getUserMedia(constraints);
|
// let constraints = {video:{width:480,height:320}, audio: false};
|
||||||
promise.then((MediaStream) => {
|
let constraints = {video: true, audio: false};
|
||||||
|
getUserMedia(constraints, (MediaStream) => {
|
||||||
this.video.srcObject = MediaStream;
|
this.video.srcObject = MediaStream;
|
||||||
this.video.play();
|
this.video.play();
|
||||||
}).catch(function (PermissionDeniedError) {
|
}, function (PermissionDeniedError) {
|
||||||
console.log(PermissionDeniedError);
|
console.log(PermissionDeniedError);
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@ -122,11 +140,10 @@ export default {
|
|||||||
height: calc(100% - 60px);
|
height: calc(100% - 60px);
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
|
font-size: 28rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 20rem;
|
left: 20rem;
|
||||||
top: 20rem;
|
top: 20rem;
|
||||||
width: 20rem;
|
|
||||||
height: 20rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-music {
|
.choose-music {
|
||||||
@ -139,8 +156,10 @@ export default {
|
|||||||
padding: 5rem 15rem;
|
padding: 5rem 15rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
font-size: 14rem;
|
||||||
|
|
||||||
img {
|
svg {
|
||||||
|
font-size: 30rem;
|
||||||
margin-right: 5rem;
|
margin-right: 5rem;
|
||||||
width: 12rem;
|
width: 12rem;
|
||||||
height: 12rem;
|
height: 12rem;
|
||||||
@ -157,13 +176,7 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20rem;
|
margin-bottom: 20rem;
|
||||||
font-size: 10rem;
|
font-size: 26rem;
|
||||||
|
|
||||||
img {
|
|
||||||
width: 20rem;
|
|
||||||
height: 20rem;
|
|
||||||
margin-bottom: 5rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -342,13 +342,13 @@
|
|||||||
.heat {
|
.heat {
|
||||||
color: @second-text-color;
|
color: @second-text-color;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 30rem;
|
gap: 26rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 15rem;
|
font-size: 14rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="item"
|
<div class="item"
|
||||||
:style="floatFixed?'opacity: 0;':''"
|
:style="floatFixed?'opacity: 0;':''"
|
||||||
@click="$no">
|
@click="$nav('/message/visitors')">
|
||||||
<Icon icon="eva:people-outline"/>
|
<Icon icon="eva:people-outline"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" @click="$no">
|
<div class="item" @click="$no">
|
||||||
|
|||||||
@ -1,17 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="Message" ref="app" :class="createChatDialog?'disable-scroll':''">
|
<div id="Message" ref="app" :class="createChatDialog?'disable-scroll':''">
|
||||||
<div class="no-search" v-show="!searching">
|
<div class="no-search" v-show="!searching">
|
||||||
<BaseHeader :isFixed="false">
|
<header>
|
||||||
<template v-slot:center>
|
<Icon @click="createChatDialog = true" icon="formkit:add"/>
|
||||||
<span class="f16">消息</span>
|
<Icon icon="tabler:camera-selfie" />
|
||||||
</template>
|
<Icon @click="searching = true" icon="tabler:search"/>
|
||||||
<template v-slot:right>
|
</header>
|
||||||
<span class="f14" @click="createChatDialog = true">创建群聊</span>
|
|
||||||
</template>
|
|
||||||
</BaseHeader>
|
|
||||||
|
|
||||||
<Scroll ref="mainScroll">
|
<Scroll ref="mainScroll">
|
||||||
<Search class="ml2r mr2r mb2r" @click="searching = true"></Search>
|
|
||||||
<div class="friends pl1r ">
|
<div class="friends pl1r ">
|
||||||
<div class="friend pr1r pl1r"
|
<div class="friend pr1r pl1r"
|
||||||
@click="$nav('/message/chat')"
|
@click="$nav('/message/chat')"
|
||||||
@ -512,6 +508,19 @@ export default {
|
|||||||
.no-search {
|
.no-search {
|
||||||
height: 100vh;
|
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 {
|
.create-chat-wrapper {
|
||||||
min-height: 70vh;
|
min-height: 70vh;
|
||||||
padding-bottom: 60rem;
|
padding-bottom: 60rem;
|
||||||
@ -756,6 +765,7 @@ export default {
|
|||||||
|
|
||||||
.scroll {
|
.scroll {
|
||||||
height: calc(100% - @header-height - @footer-height);
|
height: calc(100% - @header-height - @footer-height);
|
||||||
|
padding-top: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.friends {
|
.friends {
|
||||||
@ -837,7 +847,7 @@ export default {
|
|||||||
.head-image {
|
.head-image {
|
||||||
margin-left: 20rem;
|
margin-left: 20rem;
|
||||||
margin-right: 15rem;
|
margin-right: 15rem;
|
||||||
@width: 45rem;
|
@width: 55rem;
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|||||||
@ -67,7 +67,8 @@ import Uploader from "../pages/me/Uploader";
|
|||||||
import GoodsDetail from "@/pages/shop/GoodsDetail.vue";
|
import GoodsDetail from "@/pages/shop/GoodsDetail.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{path: '/', redirect: '/home'},
|
{path: '/', redirect: '/attention'},
|
||||||
|
// {path: '/', redirect: '/home'},
|
||||||
{path: '/test', component: Test},
|
{path: '/test', component: Test},
|
||||||
{path: '/test4', component: Test4},
|
{path: '/test4', component: Test4},
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user