优化页面

This commit is contained in:
pengxiaolong
2025-05-23 22:04:04 +08:00
parent 0d7301f3b1
commit 728dfd501f
5 changed files with 39 additions and 21 deletions

View File

@@ -1,5 +1,5 @@
<template>
<view v-if="Display" class="Mask create-module" @click="open()">
<template><view v-if="Display" :class="[Display ? 'create-module' : 'close-animation ', 'Mask']" @click="open()">
<view @click.stop class="containers">
<view class="container">
<image
@@ -276,21 +276,28 @@ export default {
<style scoped>
/* 定义动画 */
/* 原始进入动画 */
@keyframes slide-in {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* 应用动画到组件 */
/* 新增关闭动画 */
@keyframes slide-out {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-100%); opacity: 0; }
}
/* 进入动画类 */
.create-module {
animation: slide-in 0.3s ease-in-out;
}
/* 关闭动画类 */
.close-animation {
animation: slide-out 0.3s ease-in-out forwards;
}
.Mask {
width: 100vw;
height: 100vh;

File diff suppressed because one or more lines are too long

View File

@@ -229,7 +229,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
B: common_vendor.o$1(($event) => $options.Publish()),
C: common_vendor.o$1(() => {
}),
D: common_vendor.o$1(($event) => $options.open())
D: common_vendor.n($data.Display ? "create-module" : "close-animation "),
E: common_vendor.o$1(($event) => $options.open())
}) : {});
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-96d38e2b"]]);

View File

@@ -1 +1 @@
<view wx:if="{{a}}" class="Mask create-module data-v-96d38e2b" bindtap="{{D}}"><view catchtap="{{C}}" class="containers data-v-96d38e2b"><view class="container data-v-96d38e2b"><image class="Fork data-v-96d38e2b" bindtap="{{b}}" src="{{c}}" mode="scaleToFill"/><view class="Title data-v-96d38e2b">发布新PK</view><view class="NameAnchor data-v-96d38e2b"><input class="NameAnchorcss data-v-96d38e2b" cursor-color="#ffffff" placeholder-style="color:#ffffff" bindinput="{{d}}" placeholder="主播名称"/><view wx:if="{{e}}" class="Hint data-v-96d38e2b">请填写主播名称</view></view><view class="Accountnumber data-v-96d38e2b"><view class="Coins country data-v-96d38e2b"><wht-select wx:if="{{g}}" class="data-v-96d38e2b" style="width:350rpx" bindchange="{{f}}" u-i="96d38e2b-0" bind:__l="__l" u-p="{{g}}"/><view wx:if="{{h}}" class="Hint data-v-96d38e2b">请选择国家</view></view><view class="Gender data-v-96d38e2b"><view class="Gendercs data-v-96d38e2b"><view class="Gendercss data-v-96d38e2b"><wht-select wx:if="{{j}}" class="data-v-96d38e2b" style="width:300rpx" bindchange="{{i}}" u-i="96d38e2b-1" bind:__l="__l" u-p="{{j}}"/></view><view class="Gendericoncss data-v-96d38e2b"><image wx:if="{{k}}" class="Gendericon data-v-96d38e2b" src="{{l}}" mode="scaleToFill"/><image wx:if="{{m}}" class="Gendericon data-v-96d38e2b" src="{{n}}" mode="scaleToFill"/><image wx:if="{{o}}" class="Gendericon data-v-96d38e2b" src="{{p}}" mode="scaleToFill"/></view></view><view wx:if="{{q}}" class="Hintcss data-v-96d38e2b">请选择性别</view></view></view><view class="goldCoin data-v-96d38e2b"><view class="number-box data-v-96d38e2b"><view class="number-box-title data-v-96d38e2b">金币数量:</view><uni-number-box wx:if="{{s}}" class="data-v-96d38e2b" u-i="96d38e2b-2" bind:__l="__l" bindupdateModelValue="{{r}}" u-p="{{s}}"></uni-number-box><view class="number-box-title data-v-96d38e2b">单位:</view><view class="number-box-unit data-v-96d38e2b">K</view></view><view wx:if="{{t}}" class="Hint data-v-96d38e2b">请填写金币数量</view></view><view class="time data-v-96d38e2b"><uni-datetime-picker wx:if="{{x}}" class="data-v-96d38e2b" bindchange="{{v}}" u-i="96d38e2b-3" bind:__l="__l" bindupdateModelValue="{{w}}" u-p="{{x}}"/><view wx:if="{{y}}" class="Hint data-v-96d38e2b">请选择日期</view></view><view class="Remarkscss data-v-96d38e2b"><uni-easyinput wx:if="{{A}}" class="data-v-96d38e2b" u-i="96d38e2b-4" bind:__l="__l" bindupdateModelValue="{{z}}" u-p="{{A}}"></uni-easyinput></view><view class="Publish data-v-96d38e2b"><button bindtap="{{B}}" class="Publishcss data-v-96d38e2b">发布</button></view></view></view></view>
<view wx:if="{{a}}" class="{{['data-v-96d38e2b', D, 'Mask']}}" bindtap="{{E}}"><view catchtap="{{C}}" class="containers data-v-96d38e2b"><view class="container data-v-96d38e2b"><image class="Fork data-v-96d38e2b" bindtap="{{b}}" src="{{c}}" mode="scaleToFill"/><view class="Title data-v-96d38e2b">发布新PK</view><view class="NameAnchor data-v-96d38e2b"><input class="NameAnchorcss data-v-96d38e2b" cursor-color="#ffffff" placeholder-style="color:#ffffff" bindinput="{{d}}" placeholder="主播名称"/><view wx:if="{{e}}" class="Hint data-v-96d38e2b">请填写主播名称</view></view><view class="Accountnumber data-v-96d38e2b"><view class="Coins country data-v-96d38e2b"><wht-select wx:if="{{g}}" class="data-v-96d38e2b" style="width:350rpx" bindchange="{{f}}" u-i="96d38e2b-0" bind:__l="__l" u-p="{{g}}"/><view wx:if="{{h}}" class="Hint data-v-96d38e2b">请选择国家</view></view><view class="Gender data-v-96d38e2b"><view class="Gendercs data-v-96d38e2b"><view class="Gendercss data-v-96d38e2b"><wht-select wx:if="{{j}}" class="data-v-96d38e2b" style="width:300rpx" bindchange="{{i}}" u-i="96d38e2b-1" bind:__l="__l" u-p="{{j}}"/></view><view class="Gendericoncss data-v-96d38e2b"><image wx:if="{{k}}" class="Gendericon data-v-96d38e2b" src="{{l}}" mode="scaleToFill"/><image wx:if="{{m}}" class="Gendericon data-v-96d38e2b" src="{{n}}" mode="scaleToFill"/><image wx:if="{{o}}" class="Gendericon data-v-96d38e2b" src="{{p}}" mode="scaleToFill"/></view></view><view wx:if="{{q}}" class="Hintcss data-v-96d38e2b">请选择性别</view></view></view><view class="goldCoin data-v-96d38e2b"><view class="number-box data-v-96d38e2b"><view class="number-box-title data-v-96d38e2b">金币数量:</view><uni-number-box wx:if="{{s}}" class="data-v-96d38e2b" u-i="96d38e2b-2" bind:__l="__l" bindupdateModelValue="{{r}}" u-p="{{s}}"></uni-number-box><view class="number-box-title data-v-96d38e2b">单位:</view><view class="number-box-unit data-v-96d38e2b">K</view></view><view wx:if="{{t}}" class="Hint data-v-96d38e2b">请填写金币数量</view></view><view class="time data-v-96d38e2b"><uni-datetime-picker wx:if="{{x}}" class="data-v-96d38e2b" bindchange="{{v}}" u-i="96d38e2b-3" bind:__l="__l" bindupdateModelValue="{{w}}" u-p="{{x}}"/><view wx:if="{{y}}" class="Hint data-v-96d38e2b">请选择日期</view></view><view class="Remarkscss data-v-96d38e2b"><uni-easyinput wx:if="{{A}}" class="data-v-96d38e2b" u-i="96d38e2b-4" bind:__l="__l" bindupdateModelValue="{{z}}" u-p="{{A}}"></uni-easyinput></view><view class="Publish data-v-96d38e2b"><button bindtap="{{B}}" class="Publishcss data-v-96d38e2b">发布</button></view></view></view></view>

View File

@@ -1,20 +1,30 @@
/* 定义动画 */
/* 原始进入动画 */
@keyframes slide-in-96d38e2b {
from {
transform: translateY(100%);
opacity: 0;
from { transform: translateY(100%); opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
to { transform: translateY(0); opacity: 1;
}
}
/* 应用动画到组件 */
/* 新增关闭动画 */
@keyframes slide-out-96d38e2b {
from { transform: translateY(0); opacity: 1;
}
to { transform: translateY(-100%); opacity: 0;
}
}
/* 进入动画类 */
.create-module.data-v-96d38e2b {
animation: slide-in-96d38e2b 0.3s ease-in-out;
}
/* 关闭动画类 */
.close-animation.data-v-96d38e2b {
animation: slide-out-96d38e2b 0.3s ease-in-out forwards;
}
.Mask.data-v-96d38e2b {
width: 100vw;
height: 100vh;