页面
This commit is contained in:
pengxiaolong
28
components/Advertisement/Advertisement.vue
Normal file
28
components/Advertisement/Advertisement.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view class="advertisement">广告</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时执行
|
||||
},
|
||||
methods: {
|
||||
// 方法定义
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.advertisement {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: #ff0000;
|
||||
}
|
||||
/* 样式定义 */
|
||||
</style>
|
||||
222
components/contentList/contentList.vue
Normal file
222
components/contentList/contentList.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<scroll-view scroll-y="true" class="scroll">
|
||||
<uni-card class="content-list" v-for="(item, index) in list">
|
||||
<!-- `````````````````````````` -->
|
||||
<image class="headShot" src="../../static/logo.png" mode="scaleToFill" />
|
||||
<!-- `````````````````````````````````````` -->
|
||||
<view class="content-list-title">
|
||||
<view class="cardname">{{ item.title }}</view>
|
||||
<view class="content-list-info">
|
||||
<view :class="{Gendermale:Gender,Genderfemale:!Gender}"><!-- 性别换背景 -->
|
||||
<image v-if="Gender" class="Genderimg" src="../../static/female.png" mode="scaleToFill" />
|
||||
<image v-else class="Genderimg" src="../../static/female.png" mode="scaleToFill" />
|
||||
<view class="age">{{ item.gender }}</view>
|
||||
</view>
|
||||
<view class="RoomID">房间ID:{{ item.id }}</view>
|
||||
<view class="Charm">魅力值</view>
|
||||
<view class="charmValue"> {{ item.score }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- `````````````````````````````````````````````````````` -->
|
||||
</uni-card>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "Hello",
|
||||
Gender: true,
|
||||
// 列表数据
|
||||
list: [
|
||||
{
|
||||
title: "极乐世界",
|
||||
id: "9088",
|
||||
gender: "男",
|
||||
score: 8.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界2",
|
||||
id: "9089",
|
||||
gender: "女",
|
||||
score: 7.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
{
|
||||
title: "极乐世界3",
|
||||
id: "9090",
|
||||
gender: "男",
|
||||
score: 9.8,
|
||||
},
|
||||
],
|
||||
// 列表数据结束
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时执行
|
||||
},
|
||||
methods: {
|
||||
// 方法定义
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scroll {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.content-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 712rpx;
|
||||
height: 161rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 15rpx;
|
||||
margin-bottom: 12rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.headShot {
|
||||
width: 101rpx;
|
||||
height: 101rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-left: 30rpx;
|
||||
margin-right: 33rpx;
|
||||
}
|
||||
.content-list-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.cardname {
|
||||
font-size: 31rpx;
|
||||
color: #161616;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
.Genderimg {
|
||||
width: 15rpx;
|
||||
height: 15rpx;
|
||||
margin-left: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.age {
|
||||
color: #ffffff;
|
||||
font-size: 14rpx;
|
||||
}
|
||||
|
||||
.Gendermale{
|
||||
background: url(../../static/maleimg.png) no-repeat center;
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.Genderfemale{
|
||||
background: url(../../static/femaleimg.png) no-repeat center;
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.RoomID {
|
||||
font-size: 23rpx;
|
||||
color: #a3a3a3;
|
||||
line-height: 38rpx;
|
||||
margin-right: 152rpx;
|
||||
}
|
||||
.Charm {
|
||||
font-size: 23rpx;
|
||||
color: #a3a3a3;
|
||||
line-height: 38rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.charmValue {
|
||||
font-size: 23rpx;
|
||||
color: #161616;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
</style>
|
||||
259
components/tabBar/tabBar.vue
Normal file
259
components/tabBar/tabBar.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view class="tab-block">
|
||||
|
||||
<ul class="tab-list flex flex-center"
|
||||
:class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'">
|
||||
<li v-for="(item, index) in tabList" :class="'list-item flex flex-column flex-middle ' + item.middleClass"
|
||||
@click="handlePush(item, index)" :key="index">
|
||||
<view class="item-img-box">
|
||||
<image class="item-img" :src="tabIndex == index ? item.selectedIconPath : item.iconPath" />
|
||||
</view>
|
||||
<view class="item-text font-20" :style="{ color: tabIndex == index ? '#1DD2F9' : '#A7A3A3' }">{{
|
||||
item.text }}</view>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <view class="tab-bar" v-show="showTabBar === true"></view> -->
|
||||
<view @touchmove.stop.prevent="disabledScroll">
|
||||
<!-- <uni-popup ref="addSuccess" type="bottom">
|
||||
<imgSuccess @closeSuccess="closeSuccess"></imgSuccess>
|
||||
</uni-popup> -->
|
||||
</view>
|
||||
<moduleSelect ref="createModule"></moduleSelect>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import moduleSelect from './moduleSelect.vue'
|
||||
import {
|
||||
getCurrentInstance,
|
||||
defineProps,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
//定义弹窗组件
|
||||
// const addSuccess = ref(null);
|
||||
|
||||
// let showTabBar = ref(false);
|
||||
let showMiddleButton = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
tabIndex: Number
|
||||
})
|
||||
let tabList = reactive([{
|
||||
iconPath: '/static/mh/img/tabbar1.png',
|
||||
selectedIconPath: '/static/mh/img/tabbarSetl1.png',
|
||||
text: '探索',
|
||||
pagePath: '/pages/index/index',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '/static/mh/img/tabbar3.png',
|
||||
selectedIconPath: '/static/mh/img/tabbarSetl3.png',
|
||||
// text: '消息',
|
||||
text: 'AI绘图',
|
||||
pagePath: '/pages/messages/messages',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '/static/mh/img/add.png',
|
||||
selectedIconPath: '/static/mh/img/add.png',
|
||||
text: '',
|
||||
pagePath: '/pages/c/c',
|
||||
middleClass: ''
|
||||
},
|
||||
{
|
||||
iconPath: '/static/mh/img/tabbar2.png',
|
||||
selectedIconPath: '/static/mh/img/tabbarSetl2.png',
|
||||
text: '换背景',
|
||||
// text: '社区',
|
||||
pagePath: '/pages/like/like'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/mh/img/tabbar4.png',
|
||||
selectedIconPath: '/static/mh/img/tabbarSetl4.png',
|
||||
text: '我的',
|
||||
pagePath: '/pages/my/my',
|
||||
middleClass: ''
|
||||
}
|
||||
]);
|
||||
onMounted(() => {
|
||||
setTabBar();
|
||||
// getSystemInfo()
|
||||
});
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: function (res) {
|
||||
// iPhone机型有横杆的导航栏高度大于40
|
||||
console.log('机型',res.deviceType);
|
||||
if (res.safeArea.top > 40) {
|
||||
console.log('苹果的底部栏大小',res.safeArea.top);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
//判断中间按钮是否突出显示
|
||||
function setTabBar() {
|
||||
let tabLength = tabList.length;
|
||||
if (tabLength % 2) {
|
||||
showMiddleButton.value = true;
|
||||
let middleIndex = Math.floor(tabLength / 2);
|
||||
tabList[middleIndex].middleClass = 'mid-button';
|
||||
}
|
||||
}
|
||||
//点击按钮
|
||||
function handlePush(item, index) {
|
||||
if (index === 2) {
|
||||
//打开弹窗
|
||||
// addSuccess.value.open();
|
||||
openPopupQuantity()
|
||||
return;
|
||||
} else if (index === 1) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/create/wenshengPicture/wenshengPicture"
|
||||
})
|
||||
} else if (index === 3) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/create/backgroundPicture/backgroundPicture"
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: item.pagePath
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
const createModule = ref()
|
||||
|
||||
function openPopupQuantity() {
|
||||
createModule.value.open()
|
||||
}
|
||||
//组件返回关闭指令
|
||||
function closeSuccess() {
|
||||
// addSuccess.value.close();
|
||||
}
|
||||
//解决弹出层后页面还可以滚动
|
||||
const disabledScroll = () => {
|
||||
return false
|
||||
}
|
||||
|
||||
//兼容iPhoneX以上底部黑线条的显示
|
||||
// function getSystemInfo() {
|
||||
// uni.getSystemInfo({
|
||||
// success: res => {
|
||||
// // X及以上的异形屏top为44，非异形屏为20
|
||||
// if (res.safeArea.top > 20) {
|
||||
// showTabBar.value = true;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-middle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.font-20 {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.tab-block {
|
||||
position: relative;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
// left: 0;
|
||||
z-index: 999;
|
||||
background-size: contain;
|
||||
width: 100vw;
|
||||
background-color: #111111;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.tab-list {
|
||||
height: 100rpx;
|
||||
padding: 0; //解决偏移
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tab-list-default {
|
||||
background-color: #ffffff;
|
||||
border-top: 1px #dddddd solid;
|
||||
}
|
||||
|
||||
.tab-list-middle {
|
||||
position: relative;
|
||||
|
||||
// background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
flex: 1;
|
||||
|
||||
.item-img-box {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-bottom: 9rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
// width: 44rpx;
|
||||
// height: 42rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.mid-button {
|
||||
position: relative;
|
||||
|
||||
.item-img-box {
|
||||
width: 150rpx;
|
||||
height: 148rpx;
|
||||
margin-bottom: 9rpx;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -104rpx;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 150rpx;
|
||||
height: 116rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-size: 20rpx;
|
||||
position: absolute;
|
||||
z-index: 1002;
|
||||
bottom: -40rpx;
|
||||
color: #393a41;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
height: 30rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
components/topNavigation/topNavigation.vue
Normal file
92
components/topNavigation/topNavigation.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<view class="topNavigation">
|
||||
<view
|
||||
@click="RealTimePk"
|
||||
:class="{ Selectcss: Select, NoSelectcss: !Select }"
|
||||
class="RealTime"
|
||||
>实时PK</view
|
||||
>
|
||||
<view
|
||||
@click="MakeAppointmentPK"
|
||||
:class="{ Selectcss: !Select, NoSelectcss: Select }"
|
||||
class="MakeAppointment"
|
||||
>预约PK</view
|
||||
>
|
||||
<view @click="screening" class="Screening">筛选</view>
|
||||
<image @click="Search" src="../../static/Searching.png" class="filter-icon" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "Hello",
|
||||
Select: true,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时执行
|
||||
},
|
||||
methods: {
|
||||
RealTimePk() {
|
||||
this.Select = true;
|
||||
this.$emit("RealTimePk");//触发实时PK事件
|
||||
},
|
||||
MakeAppointmentPK() {
|
||||
this.Select = false;
|
||||
this.$emit("MakeAppointmentPK");//触发预约PK事件
|
||||
},
|
||||
screening() {
|
||||
this.$emit("screening");//触发筛选事件
|
||||
},
|
||||
Search() {
|
||||
this.$emit("Search");//触发搜索事件
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.topNavigation {
|
||||
width: 100%;
|
||||
height: 114.5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Screening {
|
||||
width: 93rpx;
|
||||
height: 50rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 4rpx;
|
||||
font-size: 23rpx;
|
||||
color: #3b3b3b;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.filter-icon {
|
||||
width: 33rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
.RealTime {
|
||||
margin: 0 39rpx 0 41rpx;
|
||||
}
|
||||
.MakeAppointment {
|
||||
margin-right: 233rpx;
|
||||
}
|
||||
.Screening {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.Selectcss {
|
||||
width: 146rpx;
|
||||
height: 39rpx;
|
||||
font-size: 42rpx;
|
||||
color: #0e1011;
|
||||
}
|
||||
.NoSelectcss {
|
||||
width: 108rpx;
|
||||
height: 29rpx;
|
||||
font-size: 31rpx;
|
||||
color: #727a7b;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user