优化页面

This commit is contained in:
pengxiaolong
2025-06-03 22:12:34 +08:00
parent 050ceedd59
commit a40b5b88c9
48 changed files with 1656 additions and 624 deletions

View File

@@ -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;
}