优化页面
This commit is contained in:
@@ -8,13 +8,18 @@
|
||||
src="../../static/Fork.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="Title">发布新PK</view>
|
||||
<view class="Titlecss">
|
||||
<view class="Star"></view>
|
||||
<view class="Title"></view>
|
||||
<view class="Star"></view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="Individual"> -->
|
||||
<view class="NameAnchor">
|
||||
<input
|
||||
class="NameAnchorcss"
|
||||
cursor-color="#ffffff"
|
||||
placeholder-style="color:#ffffff"
|
||||
cursor-color="#666666"
|
||||
placeholder-style="color:#666666"
|
||||
@input="NameAnchor"
|
||||
placeholder="主播名称"
|
||||
/>
|
||||
@@ -30,10 +35,9 @@
|
||||
<view class="Coins country">
|
||||
<wht-select
|
||||
style="width: 350rpx"
|
||||
backgroundColor="#fff70065"
|
||||
borderRadius="20"
|
||||
backgroundColor="#ffffff"
|
||||
placeholderColor="#ffffff"
|
||||
textColor="#7cba59"
|
||||
textColor="#666666"
|
||||
borderColor="#ffffff"
|
||||
@change="country"
|
||||
:options="Country"
|
||||
@@ -47,10 +51,9 @@
|
||||
<view class="Gendercss">
|
||||
<wht-select
|
||||
style="width: 300rpx"
|
||||
backgroundColor="#ffaa0082"
|
||||
borderRadius="20"
|
||||
placeholderColor="#ffffff"
|
||||
textColor="#ffffff"
|
||||
backgroundColor="#ffffff"
|
||||
placeholderColor="#666666"
|
||||
textColor="#666666"
|
||||
borderColor="#ffffff"
|
||||
@change="gender"
|
||||
:options="Gender"
|
||||
@@ -86,7 +89,7 @@
|
||||
<view class="goldCoin">
|
||||
<view class="number-box">
|
||||
<view class="number-box-title">金币数量:</view>
|
||||
<uni-number-box background="#2bff001e" v-model="numberCoins"></uni-number-box>
|
||||
<uni-number-box background="#03ABA8" v-model="numberCoins"></uni-number-box>
|
||||
<view class="number-box-title">单位:</view>
|
||||
<view class="number-box-unit">K</view>
|
||||
</view>
|
||||
@@ -110,7 +113,7 @@
|
||||
<view class="goldCoin">
|
||||
<view class="number-box">
|
||||
<view class="number-box-title">选择场数:</view>
|
||||
<uni-number-box background="#2bff001e" v-model="numberCoins"></uni-number-box>
|
||||
<uni-number-box background="#03ABA8" v-model="numberCoins"></uni-number-box>
|
||||
<view class="number-box-title">次</view>
|
||||
</view>
|
||||
<view v-if="numberCoins === '' && Hint === true" class="Hint"
|
||||
@@ -120,8 +123,6 @@
|
||||
<!-- ··························································································· -->
|
||||
<view class="Remarkscss">
|
||||
<uni-easyinput
|
||||
:styles="styles"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
type="textarea"
|
||||
v-model="remarks"
|
||||
placeholder="备注"
|
||||
@@ -157,12 +158,6 @@ export default {
|
||||
datetimesingle: "", //日期
|
||||
id: null, //用户id
|
||||
sendingTime: "", //发送时间
|
||||
placeholderStyle: "color:#ffffff;font-size:14px",
|
||||
styles: {
|
||||
backgroundColor: "#2bff001e",
|
||||
color: "#ffffff",
|
||||
borderColor: "#00bd069d",
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -335,7 +330,8 @@ export default {
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-image: linear-gradient(135deg, #00ff4025, #00d5ff3b);
|
||||
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/bgv.png);
|
||||
background-size: 100% 100%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 1300rpx;
|
||||
@@ -343,31 +339,33 @@ export default {
|
||||
box-shadow: 0 0 10rpx #ccc;
|
||||
}
|
||||
.Fork {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-top: 20rpx;
|
||||
/* margin-bottom: 40rpx; */
|
||||
margin-left: 90%;
|
||||
}
|
||||
.Title {
|
||||
.Titlecss{
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
font-size: 70rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
/* 设置渐变背景 */
|
||||
background-image: linear-gradient(135deg, #ffff00, #00d9ff);
|
||||
/* 关键属性组合 */
|
||||
-webkit-background-clip: text; /* 兼容 iOS/Android */
|
||||
background-clip: text;
|
||||
/* 文字颜色设为透明 */
|
||||
color: transparent;
|
||||
/* 防止背景溢出 */
|
||||
display: inline-block;
|
||||
padding: 8rpx 16rpx;
|
||||
text-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Star{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-image: url(../../static/star.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.Title {
|
||||
width: 430rpx;
|
||||
height: 70rpx;
|
||||
background-image: url(../../static/Publishpk.png);
|
||||
background-size: 100% 200%;
|
||||
background-position: 0 100%;
|
||||
margin-left: 26rpx;
|
||||
margin-right: 26rpx;
|
||||
}
|
||||
.Individual {
|
||||
display: flex;
|
||||
@@ -385,12 +383,9 @@ export default {
|
||||
.NameAnchorcss {
|
||||
width: 99%;
|
||||
height: 85rpx;
|
||||
background-image: linear-gradient(135deg, #d9ff007a, #00ffb364);
|
||||
border-top: 2rpx solid #ffbf0049;
|
||||
border-bottom: 2rpx solid #125b003a;
|
||||
border-left: 2rpx solid #ffbf0050;
|
||||
border-right: 2rpx solid #125b0036;
|
||||
border-radius: 30rpx;
|
||||
background-color: #ffffff;
|
||||
border: 1rpx solid #BFBFBF;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color:#ffffff;
|
||||
}
|
||||
@@ -455,23 +450,16 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
.number-box-title {
|
||||
/* margin-right: 20rpx; */
|
||||
/* 设置渐变背景 */
|
||||
background-image: linear-gradient(135deg, #00ff227a, #a200ff64);
|
||||
/* 关键属性组合 */
|
||||
-webkit-background-clip: text; /* 兼容 iOS/Android */
|
||||
background-clip: text;
|
||||
/* 文字颜色设为透明 */
|
||||
color: transparent;
|
||||
/* 防止背景溢出 */
|
||||
display: inline-block;
|
||||
padding: 8rpx 16rpx;
|
||||
color: #191919;
|
||||
font-size: 30rpx;
|
||||
margin-right: 22rpx;
|
||||
margin-left: 17rpx;
|
||||
}
|
||||
.number-box-unit {
|
||||
color: #ffb30067;
|
||||
color: #03ABA8;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border: 1rpx solid #ff9d006f;
|
||||
border: 1rpx solid #03ABA8;
|
||||
border-radius: 50%;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
@@ -492,13 +480,9 @@ export default {
|
||||
margin-left: 5%;
|
||||
}
|
||||
.Publishcss {
|
||||
background-image: linear-gradient(135deg, #00ffb354, #c300ff37);
|
||||
background-image: linear-gradient(135deg, #4FCACD, #5FDBDE);
|
||||
/* color: #33ff00; */
|
||||
color: #ffffff;
|
||||
border-bottom: 2rpx solid #c300ff37;
|
||||
border-top: 2rpx solid #00ffb354;
|
||||
border-right: 2rpx solid #c300ff37;
|
||||
border-left: 2rpx solid #00ffb354;
|
||||
font-weight: bold;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user