优化页面
This commit is contained in:
@@ -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
3
unpackage/dist/dev/mp-weixin/NewAddedPk.js
vendored
3
unpackage/dist/dev/mp-weixin/NewAddedPk.js
vendored
@@ -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"]]);
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user