Przeglądaj źródła

抖音小程序样式

master
congzc 1 rok temu
rodzic
commit
014c61afa9
5 zmienionych plików z 92 dodań i 61 usunięć
  1. +11
    -8
      src/pages/closeStyle/goCreatePhoto.vue
  2. +22
    -11
      src/pages/createing/index.vue
  3. +11
    -8
      src/pages/index/index.vue
  4. +36
    -27
      src/pages/lookPhoto/index.vue
  5. +12
    -7
      src/pages/uploadPhoto/uploadPhoto.vue

+ 11
- 8
src/pages/closeStyle/goCreatePhoto.vue Wyświetl plik

@@ -4,12 +4,14 @@
><image src="../../assets/img/img1.jpg" mode="aspectFit" ><image src="../../assets/img/img1.jpg" mode="aspectFit"
/></view> /></view>
<text class="name">风格名称</text> <text class="name">风格名称</text>
<up-button
type="primary"
text="开始制作写真"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="createing"
></up-button>
<view class="buttonBox">
<up-button
type="primary"
text="开始制作写真"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="createing"
></up-button>
</view>
<text class="balance">金币余额:&nbsp;&nbsp;30</text> <text class="balance">金币余额:&nbsp;&nbsp;30</text>
</view> </view>
</template> </template>
@@ -48,9 +50,10 @@ function createing() {
margin-top: 30rpx; margin-top: 30rpx;
margin-bottom: 50rpx; margin-bottom: 50rpx;
} }
button {
width: 60% !important;
.buttonBox {
width: 60%;
} }
.balance { .balance {
margin-top: 30rpx; margin-top: 30rpx;
font-size: 40rpx; font-size: 40rpx;


+ 22
- 11
src/pages/createing/index.vue Wyświetl plik

@@ -12,7 +12,12 @@
></up-button> ></up-button>
</view> </view>
<view class="imgListBox"> <view class="imgListBox">
<view class="imgContenBox" v-for="item in 4" :key="item">
<view
class="imgContenBox"
v-for="item in 4"
:key="item"
@click="goLookPhoto"
>
<image src="../../assets/img/img2.jpg" mode="aspectFit" /> <image src="../../assets/img/img2.jpg" mode="aspectFit" />
</view> </view>
</view> </view>
@@ -31,13 +36,15 @@
<!-- 生成成功的底部栏 --> <!-- 生成成功的底部栏 -->
<view class="createEd"> <view class="createEd">
<text class="look">点击查看高清写真</text> <text class="look">点击查看高清写真</text>
<up-button
class="goon"
type="primary"
text="重新生成"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="changeStyle"
></up-button>
<view class="buttonBox">
<up-button
class="goon"
type="primary"
text="重新生成"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="changeStyle"
></up-button>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -58,7 +65,11 @@ function changeStyle() {
url: "/pages/closeStyle/closeStyle", url: "/pages/closeStyle/closeStyle",
}); });
} }
function goLookPhoto() {
uni.redirectTo({
url: "/pages/lookPhoto/index",
});
}
//#endregion --------------------- //#endregion ---------------------
//#region //#region
@@ -129,8 +140,8 @@ function changeStyle() {
margin-top: 20rpx; margin-top: 20rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
button {
width: 70% !important;
.buttonBox {
width: 50%;
} }
} }
</style> </style>

+ 11
- 8
src/pages/index/index.vue Wyświetl plik

@@ -9,12 +9,14 @@
:controls="false" :controls="false"
/> />
</view> </view>
<up-button
type="primary"
text="开始制作我的数字分身"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="toCreate"
></up-button>
<view class="buttonBox">
<up-button
type="primary"
text="开始制作我的数字分身"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="toCreate"
></up-button>
</view>
<u-checkbox-group v-model="checkboxValue1" placement="row"> <u-checkbox-group v-model="checkboxValue1" placement="row">
<u-checkbox <u-checkbox
activeColor="red" activeColor="red"
@@ -103,9 +105,10 @@ function handleLogin() {
button { button {
margin-top: 50rpx; margin-top: 50rpx;
} }
.u-button {
width: 50% !important;
.buttonBox {
width: 50%;
} }
.u-checkbox-group { .u-checkbox-group {
margin-top: 70rpx; margin-top: 70rpx;
} }


+ 36
- 27
src/pages/lookPhoto/index.vue Wyświetl plik

@@ -10,34 +10,42 @@
<!-- 底部 --> <!-- 底部 -->
<view class="bottomBox"> <view class="bottomBox">
<text class="balance">金币余额:&nbsp;&nbsp;30</text> <text class="balance">金币余额:&nbsp;&nbsp;30</text>
<up-button
type="primary"
text="下载照片"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
></up-button>
<view class="btnBox">
<up-button
type="primary"
text="分享"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click="share"
></up-button>
<up-button
type="primary"
text="邀请好友"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click="inviteFriend"
></up-button>
<view class="buttonBox">
<up-button <up-button
type="primary" type="primary"
text="购买金币"
text="下载照片"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="bueCoin"
@click=""
></up-button> ></up-button>
</view> </view>
<view class="btnBox">
<view class="buttonBox">
<up-button
type="primary"
text="分享"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click="share"
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="邀请好友"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
open-type="share"
@click="inviteFriend"
></up-button>
</view>
<view class="buttonBox">
<up-button
type="primary"
text="购买金币"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="bueCoin"
></up-button>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -143,16 +151,17 @@ function bueCoin() {
font-size: 40rpx; font-size: 40rpx;
margin-bottom: 50rpx; margin-bottom: 50rpx;
} }
button {
width: 60% !important;
.buttonBox {
width: 60%;
} }
.btnBox { .btnBox {
margin-top: 90rpx; margin-top: 90rpx;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
button {
width: 30% !important;
.buttonBox {
width: 30%;
} }
} }
} }


+ 12
- 7
src/pages/uploadPhoto/uploadPhoto.vue Wyświetl plik

@@ -32,12 +32,14 @@
mode="aspectFit" mode="aspectFit"
/> />
</view> </view>
<up-button
type="primary"
text="上传我的照片"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="toCloseStyle"
></up-button>
<view class="bottonBox">
<up-button
type="primary"
text="上传我的照片"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click="toCloseStyle"
></up-button>
</view>
<view class="tips">请按照样片上传您五官清晰的正面照片</view> <view class="tips">请按照样片上传您五官清晰的正面照片</view>
<view class="demoImgBox"> <view class="demoImgBox">
<view class="demoImg1"></view> <view class="demoImg1"></view>
@@ -152,9 +154,12 @@ function toCloseStyle() {
} }
} }
} }
.buttonBox {
width: 50%;
}
// 上传 // 上传
.u-button { .u-button {
width: 70% !important;
// width: 70% !important;
} }
.tips { .tips {
margin-top: 20rpx; margin-top: 20rpx;


Ładowanie…
Anuluj
Zapisz