安卓前端作业

最新推荐文章于 2023-12-16 11:00:59 发布
最新推荐文章于 2023-12-16 11:00:59 发布
阅读量121 收藏
点赞数
文章标签： 数学建模 java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73898742/article/details/131166420
版权

一、代码介绍：

1.1、登录页面代码：

1.2注册页面代码：

1.3、主页代码：

1.4、奖励设置代码：

1.5、事件编辑界面：

1.6、事件添加界面：

二、效果图展示：

1.登录页效果图：

2.注册效果图如下：

3.主页效果如下：

3.奖励界面效果：

4.事件编辑效果：

5、事件添加界面：

一、代码介绍：

1.1、登录页面代码：

     <template>

<view class="backColor">

<view class="loverStory">

<text class="headTxt">Lover Story</text>

<view class="admin">

<input type="text" placeholder="请输入账号" class="inTxt"/>

</view>

<view class="passWord">

<input type="password" placeholder="请输入密码" class="inTxt"/>

</view>

<view class="btn">

<button class="loginBtn" @tap="loginTing">登录</button>

</view>

<view class="logImg">

<image src="/static/backImage/image 2.png"></image>

</view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

}

},

methods: {

loginTing(){

uni.navigateTo({

url:'/pages/first/first'

})

/* uni.login({

success: (res) => {

console.log(res.code);

uni.request({

url:"http://localhost:8080/login",

method:"GET",

// header:{

// "Content-Type":"x-www-form-urlencoded"

// },

data:{

code:res.code

},

success: (e) => {

if(e.data.code === 200){

console.log(e);

uni.setStorageSync("token",e.data.data)

}

}

})

}

}) */

}

}

}

</script>

<style lang="scss">

.backColor{

width: 100%;

height: 800px;

background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);

.loverStory{

.headTxt{

color: white;

font-size: 36px;

margin-top: 109px;

margin-left: 24px;

line-height: 36px;

font-weight: 500;

}

.admin{

margin-top: 60px;

margin-left: 24px;

width: 85%;

height: 52px;

border-radius: 41px;

border: #FFFFFF 1px solid;

background-color: #FFFFFF;

mix-blend-mode: normal;

opacity: 0.3;//透明

.inTxt{

margin-top: 17px;

margin-left: 22px;

width: 90px;

height: 18px;

font-style: normal;

font-weight: 400;

line-height: 18px;

font-family: 'PingFang SC';

}

}

.passWord{

margin-top: 24px;

margin-left: 24px;

width: 85%;

height: 52px;

border-radius: 41px;

border: #FFFFFF 1px solid;

background-color: #FFFFFF;

mix-blend-mode: normal;

opacity: 0.3;//透明

.inTxt{

margin-top: 17px;

margin-left: 22px;

width: 90px;

height: 18px;

font-style: normal;

font-weight: 400;

line-height: 18px;

font-family: 'PingFang SC';

}

}

.btn{

.loginBtn{

position: absolute;

width: 327px;

height: 52px;

margin-left: 24px;

margin-top: 73px;

background: #FFFFFF;

opacity: 0.7;

border-radius: 32px;

}

}

.logImg{

position: absolute;

width: 302px;

height: 289px;

margin-left: 36px;

margin-top: 130px;

/* background: url(image 2.png);

backdrop-filter: blur(2.5px); */

}

}

}

</style>

1.2跳转页代码：

在button属性中添加“@tap="loginTing"”，具体如下：

@tap="loginTing"

loginTing(){

uni.navigateTo({

url:'/pages/first/first'

})

 1.2注册页面代码：

<template>

<view class="backColor">

<view class="txt"> Lover Story</view>

<view class="phoneNum">

手机号

<input type="text" placeholder="请输入账号" class="inTxt"/>

</view>

<view class="passWord">

设置密码

<input type="password" placeholder="请输入密码" class="inTxt"/>

</view>

<view class="btn">

<button class="reg">

注册

</button>

</view>

</view>

</template>

<script>

export default {

data() {

return {

}

},

methods: {

}

}

</script>

<style lang="scss">

.backColor{

width: 100%;

height: 800px;

background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);

.txt{

color: white;

font-size: 36px;

margin-left: 24px;

line-height: 36px;

font-weight: 500;

}

.phoneNum{

position: absolute;

width: 192px;

height: 28px;

font-style: normal;

font-weight: 500;

font-size: 18px;

line-height: 18px;

margin-top: 80px;

margin-left: 30px;

color: white;

.inTxt{

position: absolute;

width: 315px;

height: 0px;

margin-top: 16px;

border:none;   

border-bottom: 1px solid rgba(255, 255, 255, 0.8)

}

}

.passWord{

margin-top: 196px;

margin-left: 30px;

position: absolute;

width: 192px;

height: 28px;

font-style: normal;

font-weight: 500;

font-size: 18px;

line-height: 18px;

color: white;

.inTxt{

position: absolute;

width: 315px;

height: 0px;

margin-top: 16px;

border:none;   

border-bottom: 1px solid rgba(255, 255, 255, 0.8)

}

}

.btn{

.reg{

margin-top: 307px;

position: absolute;

width: 327px;

height: 52px;

margin-left: 24px;

background: #FFFFFF;

opacity: 0.7;

border-radius: 32px;

}

}

}

</style>

1.3、主页代码：

<template>

<view class="backColor">

<!-- 心动值 -->

<view class="header">

<view class="loveNuber">心动值：

<input type="text" class="getNuber"/>

</view>

</view>

<!-- 心跳值 -->

<view class="neck" v-show="isSelect == false" >

<text class="txt">心跳值</text>

<image class="hardImg" src="../../static/backImage/Frame.png"></image>

<text class="txt1" @tap="nextPage1">兑换奖励</text>

<image class="arrowImg" src="../../static/backImage/back.png" ></image>

</view>

<view class="neck" v-show="isSelect == true">

<text class="txt">给Ta设置</text>

<image class="hardImg" src="../../static/backImage/Frame.png"></image>

<text class="txt1" @tap="nextPage2">心跳值奖励</text>

<image class="arrowImg" src="../../static/backImage/back.png"></image>

</view>

<!-- 圆角框 -->

<view class="tab-content">

<view class="tab-content-main">

<view class="tab-content-main-left" @tap="selectEvent(1)" :style="{color:isSelect == false?'#FA57B6':'#FFFFFF',backgroundColor:isSelect == false?'#FFFFFF':''}">

我的心跳值：45

</view>

<view class="tab-content-main-right" @tap="selectEvent(2)" :style="{color:isSelect == true?'#FA57B6':'#FFFFFF',backgroundColor:isSelect == true?'#FFFFFF':''}">

Ta的心跳值：46

</view>

</view>

</view>

<!-- 图 -->

<view class="map">

<image class="outside" src="../../static/backImage/Graph.png"></image>

</view>

<!-- 左边的内容区域 -->

<view class="content-left" v-show="isSelect == false">

<view class="content-main">

<!-- 左边 -->

<view class="content-main-left">

<!-- 序号 -->

<view class="content-main-left-num">1</view>

<!-- 标题和时间 -->

<view class="content-main-left-tt">

<view class="content-main-left-tt-title">烧烤撸串</view>

<view class="content-main-left-tt-time">2021-07-04 下午</view>

</view>

</view>

<!-- 右边 -->

<view class="content-main-right">

<!-- 符号 -->

<image class="content-main-right-img" src="/static/backImage/jiahao.png"></image>

<!-- 当前分数 -->

<view class="content-main-right-currentnum">5</view>

<!-- 爱心和总分 -->

<view class="content-main-right-lt">

<image class="content-main-right-lt-img" src="../../static/backImage/pinkHard.png"></image>

<view class="content-main-right-lt-txt">45</view>

</view>

<image class="content-main-right-back" src="../../static/backImage/back-pink.png"></image>

</view>

</view>

</view>

<!-- 右边的内容区域 -->

<view class="content-right" v-show="isSelect == true">

<view class="addEndReduce">

<!-- 加减符号 -->

<view class="content-main-add">

<image class="addImage" src="/static/backImage/Group 3.png" @tap="nextPage3"></image>

</view>

<view class="content-main-reduce">

<image class="reduceImage" src="/static/backImage/Group 4.png" @tap="nextPage4"></image>

</view>

</view>

<view class="content-main">

<!-- 左边 -->

<view class="content-main-left">

<!-- 序号 -->

<view class="content-main-left-num">1</view>

<!-- 标题和时间 -->

<view class="content-main-left-tt">

<view class="content-main-left-tt-title">烧烤撸串</view>

<view class="content-main-left-tt-time">2021-07-04 下午</view>

</view>

</view>

<!-- 右边 -->

<view class="content-main-right">

<!-- 符号 -->

<image class="content-main-right-img" src="/static/backImage/jiahao.png"></image>

<!-- 当前分数 -->

<view class="content-main-right-currentnum">5</view>

<!-- 爱心和总分 -->

<view class="content-main-right-lt">

<image class="content-main-right-lt-img" src="../../static/backImage/pinkHard.png"></image>

<view class="content-main-right-lt-txt">45</view>

</view>

<image class="content-main-right-back" src="../../static/backImage/back-pink.png"></image>

</view>

</view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

/* 动态绑定 */

isSelect:false

}

},

onLoad() {

},

methods: {

/* 设置选择：被选中时出现，未选中时隐藏 */

selectEvent(index){

if(index == 1){

this.isSelect = false

}else{

this.isSelect = true

}

},

/* 跳转至你给他设置的奖励 */

nextPage1(){

uni.navigateTo({

url:"/pages/meRword/meRword"

})

},

/* 跳转至ta给你设置的奖励 */

nextPage2(){

uni.navigateTo({

url:"/pages/taReword/taReword"

})

},

/* 跳转至添加加分项 */

nextPage3(){

uni.navigateTo({

url:"/pages/addHappyThing/addHappyThing"

})

},

/* 跳转至扣分项 */

nextPage4(){

uni.navigateTo({

url:"/pages/addBadThing/addBadThing"

})

}

}

}

</script>

<style lang="scss">

.backColor{

width: 100%;

height: 800px;

background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);

box-sizing: border-box;

/* background-image: url("/static/backImage/backColor.jpg"); */

.header{

display: flex;

flex-direction: column;

font-size: 60rpx;

.loveNuber{

color: white;

margin-left: 24rpx;

margin-top: 104rpx;

display: flex;

flex-direction: row;

.getNuber{

width: 20%;

font-size: 60rpx;

}

}

}

.neck{

margin-top: 18px;

display: flex;

flex-direction: row;

.txt{

color: white;

margin-left: 24rpx;

font-size: 30rpx;

margin-top: 18rpx;

}

.hardImg{

margin-top: 18rpx;

margin-left: 10rpx;

width: 16px;

height: 16px;

}

.txt1{

color: white;

margin-left: 20rpx;

font-size: 30rpx;

margin-top: 18rpx;

}

.arrowImg{

margin-top: 23rpx;

margin-left: 20rpx;

width: 10px;

height: 16px;

}

}

.tab-content{

margin-top: 24px;

width: 100%;

height: 36px;

padding-left: 24px;

padding-right: 24px;

box-sizing: border-box;

.tab-content-main{

width: 100%;

height: 100%;

display: flex;

.tab-content-main-left{

width: 50%;

height: 100%;

border: 3px solid white;

border-right-width: 0;

box-sizing: border-box;

border-top-left-radius: 36px;

border-bottom-left-radius: 36px;

display: flex;

justify-content: center;

align-items: center;

}

.tab-content-main-right{

width: 50%;

height: 100%;

border: 3px solid white;

border-left-width: 0;

box-sizing: border-box;

border-top-right-radius: 36px;

border-bottom-right-radius: 36px;

display: flex;

justify-content: center;

align-items: center;

}

}

}

.outside{

margin-top: 157rpx;

margin-bottom: 39px;

width: 100%;

height: 200px;

}

.content-left{

width: 100%;

height: 50px;

margin: auto;

padding-left:24px ;

padding-right: 24px;

box-sizing: border-box;

.content-main{

padding-top: 10px;

padding-bottom: 10px;

padding-left: 24px;

padding-right: 24px;

box-sizing: border-box;

width: 100%;

height: 100%;

display: flex;

justify-content: space-between;

border-radius: 36px;

background-color: #FFFFFF;

.content-main-left{

/* width: 100%; */

max-width: 130px;//限定最大宽度

overflow: hidden; /*超过区域就隐藏*/

white-space: nowrap; /*规定段落中的文本不进行换行*/

text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本。*/

height: 100%;

display: flex;

.content-main-left-tt{

height: 100%;

display: flex;

flex-direction: column;

justify-content:space-between;

.content-main-left-tt-title{

font-weight: 400;

font-size: 16px;

line-height: 16px;

text-align: center;

color: #121B36;

}

.content-main-left-tt-time{

font-weight: 400;

font-size: 10px;

line-height: 10px;

text-align: center;

color: #000000;

opacity: 0.2;

}

}

.content-main-left-num{

display: flex;

align-items: center;

margin-right: 23px;

}

}

.content-main-right{

width: 100px;

height: 100%;

display: flex;

align-items: center;

justify-content: flex-end;

.content-main-right-back{

margin-left: 26.64px;

width: 10px;

height: 16px;

}

.content-main-right-img{

width: 6px;

height: 6px;

margin-right: 16px;

}

.content-main-right-currentnum{

font-style: normal;

font-weight: 400;

font-size: 14px;

line-height: 14px;

text-align: center;

color: #FA57B6;

margin-right: 8px;

}

.content-main-right-lt{

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

.content-main-right-lt-img{

width: 14px;

height: 14px;

}

.content-main-right-lt-txt{

font-style: normal;

font-weight: 500;

font-size: 14px;

line-height: 14px;

text-align: center;

color: #121B36;

}

}

}

}

}

.content-right{

width: 100%;

height: 308px;

margin: auto;

padding-top: 36px;

padding-left:24px ;

padding-right: 24px;

box-sizing: border-box;

border-radius: 36px 36px 0 0 ;

background-color: #FFFFFF;

.addEndReduce{

margin-left: 210px;

display: flex;

flex-direction: row;

width: 88px;

height: 44px;

.content-main-add{

width: 100%;

height: 44px;

.addImage{

width: 44px;

height: 44px;

margin-right: 35px;

}

}

.content-main-reduce{

width: 100%;

height: 44px;

.reduceImage{

width: 44px;

height: 44px;

}

}

}

.content-main{

padding-top: 10px;

padding-bottom: 10px;

padding-left: 24px;

padding-right: 24px;

box-sizing: border-box;

width: 100%;

height: 55px;

display: flex;

justify-content: space-between;

border-radius: 36px;

background-color: #FFFFFF;

.content-main-left{

max-width: 130px;//限定最大宽度

overflow: hidden; /*超过区域就隐藏*/

white-space: nowrap; /*规定段落中的文本不进行换行*/

text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本。*/

height: 100%;

display: flex;

.content-main-left-tt{

height: 100%;

display: flex;

flex-direction: column;

justify-content:space-between;

justify-content: center;

.content-main-left-tt-title{

font-weight: 400;

font-size: 16px;

line-height: 16px;

text-align: center;

color: #121B36;

}

.content-main-left-tt-time{

font-weight: 400;

font-size: 10px;

line-height: 10px;

text-align: center;

color: #000000;

opacity: 0.2;

}

}

.content-main-left-num{

display: flex;

align-items: center;

margin-right: 23px;

}

}

.content-main-right{

width: 100px;

height: 100%;

display: flex;

align-items: center;

justify-content: flex-end;

.content-main-right-back{

margin-left: 26.64px;

width: 10px;

height: 16px;

}

.content-main-right-img{

width: 6px;

height: 6px;

margin-right: 16px;

}

.content-main-right-currentnum{

font-style: normal;

font-weight: 400;

font-size: 14px;

line-height: 14px;

text-align: center;

color: #FA57B6;

margin-right: 8px;

}

.content-main-right-lt{

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

.content-main-right-lt-img{

width: 14px;

height: 14px;

}

.content-main-right-lt-txt{

font-style: normal;

font-weight: 500;

font-size: 14px;

line-height: 14px;

text-align: center;

color: #121B36;

}

}

}

}

}

}

</style>

1.4、奖励设置代码：

<template>

<view class="backColor">

<view class="back">

<image class="backImg" src="/static/backImage/backhome.png"></image>

</view>

<view class="content" >

<text class="content-txt">我的</text>

<image class="hardImg" src="../../static/backImage/Frame.png"></image>

<text class="txt1">跳值：

<text class="txt1-num">45</text>

</text>

</view>

<!-- 外框 -->

<view class="content-main">

<view class="content-main-tt">

<!-- 标题 -->

<view class="content-main-tt-title">

您获得的每一次心跳，都是Ta的每一次♥动

</view>

<!-- 券 -->

<view class="content-main-tt-ting">

<!-- 左边分数 -->

<view class="content-main-tt-ting-left">

30分

</view>

<!-- 中间事件 -->

<view class="content-main-tt-ting-center">

电影双人劵

</view>

<!-- 右边按钮 -->

<view class="content-main-tt-ting-right">

<button class="btn">领取</button>

</view>

</view>

<!-- 领取按钮 -->

<view class="receive">

<button class="receive-btn">

一键提交

</button>

</view>

</view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

}

},

methods: {

}

}

</script>

<style lang="scss">

/* 总体背景 */

.backColor{

width: 100%;

height: 800px;

background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);

display: flex;

flex-direction: column;

box-sizing: border-box;

/* home键 */

.backImg{

width: 9px;

height: 16px;

margin-top: 68px;

margin-left: 24px;

}

/* 标题 */

.content{

/* margin-top: 10px; */

display: flex;

box-sizing: border-box;

margin-bottom: 24px;

.content-txt{

position: absolute;

width: 72px;

height: 36px;

margin-left: 24px;

margin-top: 25px;

font-style: normal;

font-weight: 500;

font-size: 36px;

line-height: 36px;

text-align: center;

color: #FFFFFF;

}

.hardImg{

margin-left: 107.65px;

margin-top: 30px;

width: 32.72px;

height: 28.93px;

display:flex;

justify-content: center;

}

.txt1{

position: absolute;

width: 152px;

height: 36px;

margin-left: 130px;

margin-top: 25px;

font-style: normal;

font-weight: 500;

font-size: 36px;

line-height: 36px;

text-align: center;

color: #FFFFFF;

.txt1-num{

position: absolute;

width: 20px;

height: 36px;

font-style: normal;

font-weight: 500;

font-size: 36px;

line-height: 36px;

text-align: center;

color: #FFFFFF;

}

}

}

/* 下半部分 */

.content-main{

width: 100%;

height: 643px;

background-color: #FFFFFF;

border-radius: 36px 36px 0 0;

.content-main-tt{

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

box-sizing: border-box;

/* justify-content: center; */

align-items: center;

padding-left: 24px;

padding-top: 24px;

padding-right: 24px;

padding-bottom: 24px;

.content-main-tt-title{

position: absolute;

width: 270px;

height: 14px;

/* padding-left: 24px; */

/* padding-top: 24px; */

font-style: normal;

font-weight: 400;

font-size: 14px;

line-height: 14px;

/* text-align: center; */

color: #121B36;

opacity: 0.6;

}

.content-main-tt-ting{

width: 100%;

height: 50px;

background-color: #FECDCA;

margin-top: 24px;

border-radius: 36px;

padding-left: 24px;

padding-top: 16px;

display: flex;

flex-direction: row;

/* box-sizing: border-box; */

.content-main-tt-ting-left{

/* font-style: normal; */

font-weight: 600;

font-size: 24px;

line-height: 30px;

/* text-align: center; */

color: #FFFFFF;

}

.content-main-tt-ting-center{

font-style: normal;

font-weight: 600;

font-size: 18px;

line-height: 18px;

display: flex;

padding-top: 6px;

padding-left: 42px;

color: #FF825A;

}

.content-main-tt-ting-right{

margin-left: 34px;

.btn{

width: 60px;

height: 30px;

font-size: 12px;

border-radius: 36px;

background-color: #FF825A;

}

}

}

.receive{

margin-top: 235px;

padding-right: 24px;

display: flex;

justify-content: center;

align-items: center;

box-sizing: border-box;

padding-left: 24px;

width: 100%;

height: 50px;

.receive-btn{

padding-top: 12px;

width: 100%;

height: 100%;

border-radius: 36px;

background-color: #FF825A;

font-style: normal;

font-weight: 600;

font-size: 24px;

line-height: 24px;

text-align: center;

color: #FFFFFF;

}

}

}

}

}

</style>

1.5、事件编辑界面：

<template>

<view class="content">

<view class="content-backgroundColor">

<!-- home键 -->

<view class="back">

<!-- 图标 -->

<image class="backImag" src="../../static/backImage/backhome.png"></image>

<!-- 提示文本 -->

<view class="content-txt">

添加心碎事件

</view>

</view>

<!-- 时间 -->

<view class="content-time">

<view class="content-time-title">

时间：

<view class="content-time-s">

2021年07月04日 下午

</view>

</view>

</view>

<!-- 下边框 -->

<view class="content-main">

<view class="content-main-title">

标题：

<view class="content-main-input">

<input class="inputTxt" type="text" placeholder="请输入..."/>

<button class="modify">修改</button>

</view>

</view>

<view class="content-main-describe">

<view class="content-main-describe-title">

描述：

<button class="content-main-describe-btn">修改</button>

</view>

<view class="content-main-background">

<input class="inputText" type="text" placeholder="请输入..."/>

</view>

<view class="content-main-describe-btns">

<button class="butt">确认提交</button>

</view>

</view>

</view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

}

},

methods: {

}

}

</script>

<style lang="scss">

.content{

.content-backgroundColor{

padding-top: 68px;

/* padding-left: 24px; */

padding-right: 24px;

width: 100%;

height: 800px;

background: #A2C7FE;

.back{

padding-left: 24px;

width: 100%;

height: 16px;

display: flex;

flex-direction: row;

box-sizing: border-box;

.backImag{

padding-right: 24px;

width: 9px;

height: 16px;

}

.content-txt{

/* font-style: normal; */

font-weight: 500;

font-size: 16px;

line-height: 22px;

display: flex;

margin-left: 85px;

color: #FFFFFF;

}

}

.content-time{

padding-top: 21px;

padding-left: 24px;

padding-right: 24px;

padding-bottom: 24px;

.content-time-title{

font-style: normal;

font-weight: 600;

font-size: 36px;

line-height: 36px;

color: #FFFFFF;

}

.content-time-s{

margin-top: 12px;

font-style: normal;

font-weight: 600;

font-size: 24px;

line-height: 24px;

color: #FFFFFF;

}

}

.content-main{

width: 100%;

height: 670px;

background-color: #FFFFFF;

border-radius: 36px 36px 0 0;

.content-main-title{

padding-top: 24px;

margin-left: 24px;

font-style: normal;

font-weight: 600;

font-size: 24px;

line-height: 24px;

color: #121B36;

.content-main-input{

display: flex;

flex-direction: row;

align-items: center;

width: 100%;

height: 100%;

box-sizing: border-box;

.inputTxt{

width: 55%;

height: 18px;

margin-top: 12px;

font-weight: 600;

font-size: 18px;

line-height: 18px;

color: rgba(18, 27, 54, 0.6);

}

.modify{

width: 60px;

height: 24px;

background: #A2C7FE;

mix-blend-mode: normal;

border-radius: 36px;

font-weight: 600;

font-size: 5px;

line-height: 38px;

display: flex;

justify-content: center;

align-items: center;

color: #FFFFFF;

}

}

}

}

.content-main-describe{

padding-top: 24px;

padding-left: 24px;

padding-right: 24px;

padding-bottom: 24px;

font-style: normal;

font-weight: 600;

font-size: 24px;

line-height: 24px;

color: #121B36;

.content-main-describe-title{

display: flex;

flex-direction: row;

.content-main-describe-btn{

width: 60px;

height: 24px;

background: #A2C7FE;

mix-blend-mode: normal;

border-radius: 36px;

font-weight: 600;

font-size: 5px;

line-height: 38px;

display: flex;

justify-content: center;

align-items: center;

color: #FFFFFF;

margin-left: 170px;

}

}

.content-main-background{

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

width: 100%;

height: 100%;

box-sizing: border-box;

.inputText{

width: 55%;

height: 18px;

margin-top: 12px;

font-weight: 600;

font-size: 18px;

line-height: 18px;

color: rgba(18, 27, 54, 0.6);

border: 10px solid #F7F7F7;

border-radius: 18px;

width: 100%;

height: 286px;

word-wrap: break-word;

word-break: normal;

background-image: url("../../static/backImage/image 3.png");

}

}

.content-main-describe-btns{

/* display: flex;

justify-content: center;

align-items: center; */

/* padding-top: 13px;

padding-left: 116px;

padding-right: 116px;

padding-bottom: 13px; */

margin-top: 53px;

.butt{

/* margin-top: 53px; */

width: 100%;

height: 50px;

background: #A2C7FE;

border-radius: 36px;

font-weight: 600;

font-size: 24px;

line-height: 24px;

display: flex;

justify-content: center;

align-items: center;

color: #FFFFFF;

}

}

}

}

}

</style>

1.6、事件添加界面：

<template>

<view class="content">

<view class="content-backgroundColor">

<!-- home键 -->

<view class="back">

<!-- 图标 -->

<image class="backImag" src="../../static/backImage/backhome.png"></image>

<!-- 提示文本 -->

<view class="content-txt">

添加心动事件

</view>

</view>

<!-- 时间 -->

<view class="content-time">

<view class="content-time-title">

时间：

<view class="content-time-s">

2021年07月04日 下午

</view>

</view>

</view>

<!-- 下边框 -->

<view class="content-main">

<view class="content-main-title">

标题：

<view class="content-main-input">

<input class="inputTxt" type="text" placeholder="请输入..."/>

<button class="modify">修改</button>

</view>

</view>

<view class="content-main-describe">

<view class="content-main-describe-title">

描述：

<button class="content-main-describe-btn">修改</button>

</view>

<view class="content-main-background">

<input class="inputText" type="text" placeholder="请输入..."/>

</view>

<view class="content-main-describe-btns">

<button class="butt">确认提交</button>

</view>

</view>

</view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

}

},

methods: {

}

}

</script>

<style lang="scss">

.content{

.content-backgroundColor{

padding-top: 68px;

/* padding-left: 24px; */

padding-right: 24px;

width: 100%;

height: 800px;

background: linear-gradient(197.99deg, #2C9AFF -14.52%, #9C74F3 16.96%, #EC81B4 54.17%, #F1BC97 74.34%, #F4E283 100%);

.back{

padding-left: 24px;

width: 100%;

height: 16px;

display: flex;

flex-direction: row;

box-sizing: border-box;

.backImag{

padding-right: 24px;

width: 9px;

height: 16px;

}

.content-txt{

/* font-style: normal; */

font-weight: 500;

font-size: 16px;

line-height: 22px;

display: flex;

margin-left: 85px;

color: #FFFFFF;

}

}

.content-time{

padding-top: 21px;

padding-left: 24px;

padding-right: 24px;

padding-bottom: 24px;

.content-time-title{

font-style: normal;

font-weight: 600;

font-size: 36px;

line-height: 36px;

color: #FFFFFF;

}

.content-time-s{

margin-top: 12px;

font-style: normal;

font-weight: 600;

font-size: 24px;

line-height: 24px;

color: #FFFFFF;

}

}

.content-main{

width: 100%;

height: 670px;

background-color: #FFFFFF;

border-radius: 36px 36px 0 0;

.content-main-title{

padding-top: 24px;

margin-left: 24px;

font-style: normal;

font-weight: 600;

font-size: 24px;

line-height: 24px;

color: #121B36;

.content-main-input{

display: flex;

flex-direction: row;

align-items: center;

width: 100%;

height: 100%;

box-sizing: border-box;

.inputTxt{

width: 55%;

height: 18px;

margin-top: 12px;

font-weight: 600;

font-size: 18px;

line-height: 18px;

color: rgba(18, 27, 54, 0.6);

}

.modify{

width: 60px;

height: 24px;

background: #FECACA;

mix-blend-mode: normal;

border-radius: 36px;

font-weight: 600;

font-size: 5px;

line-height: 38px;

display: flex;

justify-content: center;

align-items: center;

color: #FFFFFF;

}

}

}

}

.content-main-describe{

padding-top: 24px;

padding-left: 24px;

padding-right: 24px;

padding-bottom: 24px;

font-style: normal;

font-weight: 600;

font-size: 24px;

line-height: 24px;

color: #121B36;

.content-main-describe-title{

display: flex;

flex-direction: row;

.content-main-describe-btn{

width: 60px;

height: 24px;

background: #FECACA;

mix-blend-mode: normal;

border-radius: 36px;

font-weight: 600;

font-size: 5px;

line-height: 38px;

display: flex;

justify-content: center;

align-items: center;

color: #FFFFFF;

margin-left: 170px;

}

}

.content-main-background{

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

width: 100%;

height: 100%;

box-sizing: border-box;

.inputText{

width: 55%;

height: 18px;

margin-top: 12px;

font-weight: 600;

font-size: 18px;

line-height: 18px;

color: rgba(18, 27, 54, 0.6);

border: 10px solid #F7F7F7;

border-radius: 18px;

width: 100%;

height: 286px;

word-wrap: break-word;

word-break: normal;

background-image: url("../../static/backImage/image 3.png");

}

}

.content-main-describe-btns{

/* display: flex;

justify-content: center;

align-items: center; */

/* padding-top: 13px;

padding-left: 116px;

padding-right: 116px;

padding-bottom: 13px; */

margin-top: 53px;

.butt{

/* margin-top: 53px; */

width: 100%;

height: 50px;

background: #FECACA;

border-radius: 36px;

font-weight: 600;

font-size: 24px;

line-height: 24px;

display: flex;

justify-content: center;

align-items: center;

color: #FFFFFF;

}

}

}

}

}

</style>

dö565
关注
安卓前端+web后台简单示例代码
01-23
简单的安卓前端和web后台工程，使用的工具是eclipse，代码下载后所需改动仅为： 1、myfinalwork后台中demo层数据库密码 2、login2中HttpLogin中的 url部分： （1）http://10.0.2.2:8888/Myfinalwork/androidlogin.do中的10.0.2.2为安卓模拟机上测试的本机地址 （2）若要真机测试，需要找到同一局域网的ipv4的ip地址，可在命令窗口 >ipconfig 察看
自己写的一个简单app（android）前端代码及实例
热门推荐
u010740917的博客
07-08 3万+
直接上图 源代码结构图 打包好在手机上运行的app截图 代码比较简陋（本人后台开发出身前端页面画的比较丑）希望各位多多包涵 源代码地址(代码审核中)：https://download.csdn.net/download/u010740917/11295085 后台接口源代码地址（集成在springcloud项目中未完全开发完成以后将上传源代码）： ...
手机前端响应式模板源代码
11-03
手机网站，前端响应式模板源代码，全套，可以进行手机网页的响应式开发
安卓的一个小app，只有前端，适合初学者参考
04-03
上学期选的一个软件开发的选修课，因为太忙了就没有怎么做，这个是一个中间版本，入坑安卓的人可以参考哈
html简单网页代码：html+css+javascript+jquery+bootstarp响应式图书商城
qq_524614081的博客
12-16 114
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
Android大作业.zip
07-29
总结起来，这个“Android大作业”项目涵盖了Web前端开发（HTML、CSS、JavaScript）、Android原生应用开发（WebView的使用）、用户体验设计（多版本页面）、以及跨平台兼容性测试等多方面知识。对于学习Android开发的...
基于 android 的Android作业（android毕业设计，包括源码、数据库）.zip
06-05
前端：Android 数据库：MySQL （建议用 5.7 版本） 工具：Maven, Gradle 开发环境：JDK、IDEA、AndroidStudio gradle 下载源最好自行修改为国内下载源，下载速度会快很多 2. 部署 如果不会部署的话，可以找我咨询
基于Android的在线商城大作业（源码+部署说明+演示视频+源码解释）.zip
04-21
该系统采用MVC架构，前端使用Android Studio开发，后端使用Java语言编写业务逻辑，并使用MySQL数据库存储数据。 系统的设计与实现主要包括以下几个方面： 1. 用户管理：包括用户的注册、登录、个人信息修改等功能...
安卓点餐系统（Android前端开发，采用MVP设计模式）.zip
最新发布
08-27
【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发...
【前端学习】HTML + CSS 写一个登陆界面
Liaojiajia-Blog
03-03 3862
HTML + CSS 写一个登陆界面1. index.html2. style.css3. iconfont.css4. 界面效果 1. index.html <!-- * @Author: your name * @Date: 2021-03-04 16:27:09 * @LastEditTime: 2021-03-04 16:37:03 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit
22个值得收藏的android开源代码-UI篇
jianghejie123的专栏
10-20 2695
本文介绍了android开发者中比较热门的开源代码，这些代码绝大多数可以直接应用到项目中。 FileBrowserView 一个强大的文件选择控件。界面比较漂亮，使用也很简单。特点：可以自定义UI；支持复制、剪切、删除、移动文件；可以用在Fragment、ativity、DialogFragment中；支持快速切换目录。 http://jcodecraeer.com/a/open
Android 个人中心页面前端代码
扮作大侠的博客
06-28 2520
截图： 代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/fragment_setting" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://sche
安卓手机,平板运行 vs code ,写前端代码
qq_45385505的博客
12-29 6914
手机,平板运行 vs code ,写前端代码,感谢大佬写的软件
安卓开发之前端
我只要燃烧不在乎陨落
06-11 1万+
安卓 前端
android的前端实现,项目中的小实现 (安卓, javaweb, 前端)
weixin_36245388的博客
06-08 436
会不定时更新，有些项目需要重构，可能造成链接失效Android第30行，通过自定义的ImagePipelineConfig和OkHttpClient，在自定义的OkHttpClient中加入SSL证书。通过实现okhttp的Interceptor实现，在me/jcala/xmarket/network/ReqExecutor.java的61行进行注册。在第47行，证书所在位置R.raw.xmark...
【andriod】设备APP开发之前端实战操作代码
学技术，人生不误——谁也是寂寞宇宙里的流星，只是你的坚持决定了你划过的痕迹。而且，铸造了普遍里的你的唯一。
09-07 9876
随着工业自动化的不断发展，设备APP也越来越重要，本文就设备APP开发软件Android Studio 4.1的一些有用的前端操作小操作做一个罗列总结。 2、APP启动首页入口配置代码 3、APP获取andriod系统开机启动前端代码 4、授权中转页面和取得MQTT服务前端代码 二、res-layout-activity.xml 1、首页背景布局和对应MainActivity.java class代码 在activity_main.xml中 3、首页滚动条代码 三、数据接收显示界面activity
前端代码套上安卓壳子
有问题可关注公众号：前端研究院 后台输入问题回复
12-20 6114
前端代码套上安卓壳子
Android开源前端框架、实用代码（持续更新）
anticlql的博客
05-12 1242
我的安卓进阶之路 注：这不是技术文章，只是我在安卓进阶时看到的一系列的好文章，来自国内业界大佬，纯属干货。喜欢学习的小伙伴也可以参考参考 统一谢谢下面各位大佬 平台 作者 文章传送门 简书 怪盗kido 你真的会用Retrofit2吗?Retrofit2完全教程 匠心写作 扔物线 给 Android 开发者的 RxJava 详解 z...
安卓大作业单词本app源代码
12-20
在前端部分，我使用了Android Studio进行开发，利用其中的布局编辑器对界面进行设计，并使用控件来实现用户和应用程序的交互。我采用了MVP（Model-View-Presenter）的架构模式，将界面、操作逻辑和数据分离，以便于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值