任务二工单1:首页展示界面研发
1.开始对index.vue文件进行编写，针对首页模块进行布局，引入uni.scss和static/style、static/iconfont文件
uni.scss文件：uni.scss文件是一个特殊的全局样式文件，用于定义应用的整体风格，包括按钮颜色、边框风格等。它预置了一批scss变量，这些变量被广泛应用于uni-app的官方扩展插件和第三方插件中。
static/iconfont/iconfont.scss文件:在iconfont.scss文件中，可以定义图标类名，在HTML中就可通过类名来引用具体的图标。例如，定义一个类名为icon-home的类，然后在HTML中使用<i class="icon-home"></i>来显示一个家图标。
static/style/app.scss文件：文件的主要作用是为应用提供全局样式定义和布局。
将三个文件按指定位置放入：
1.png
2.然后在App.vue文件中进行文件引入代码如下，删除无用文件static/customicons.css
<script>
export default {
onLaunch: function() {
console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import '~@/static/style/app.scss';
</style>
3.进行index.vue编写，分为三个小板块进行编写
2.1.6 页面切分3小块开发.png
第一板块代码如下：
<template>
<view class="container">
<!-- 头部布局 -->
<view class="banner">
<image src="https://s3.uuu.ovh/imgs/2024/12/01/0793d43c7403e3de.jpg" class="bg"></image>
<view class="intro">
<view class="greet">您好，游客</view>
<view class="note">一杯奶茶，一口软欧包，在云鲤遇见两种美好</view>
</view>
</view>
<view class="content">
<!-- 中间 自取 和 外卖 -->
<view class="entrance">
<view class="item">
<image src="/static/images/index/zq.png" class="icon"></image>
<view class="title">自取</view>
</view>
<view class="item">
<image src="/static/images/index/wm.png" class="icon"></image>
<view class="title">外卖</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
/* #ifdef H5 */
page {
height: auto;
min-height: 100%;
}
/* #endif */
.banner {
position: relative;
width: 100%;
height: 600rpx;
.bg {
width: 100%;
height: 600rpx;
}
.intro {
position: absolute;
top: calc(50rpx + var(--status-bar-height));
left: 40rpx;
color: #FFFFFF;
display: flex;
flex-direction: column;
.greet {
font-size: $font-size-lg;
margin-bottom: 10rpx;
}
.note {
font-size: $font-size-sm;
}
}
}
.content {
padding: 0 30rpx;
}
.entrance {
position: relative;
margin-top: -80rpx;
margin-bottom: 30rpx;
border-radius: 10rpx;
background-color: #ffffff;
box-shadow: $box-shadow;
padding: 30rpx 0;
display: flex;
align-items: center;
justify-content: center;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
&:nth-child(1):after {
content: '';
position: absolute;
width: 1rpx;
background-color: #ddd;
right: 0;
height: 100%;
transform: scaleX(0.5) scaleY(0.8);
}
.icon {
width: 84rpx;
height: 84rpx;
margin: 20rpx;
}
.title {
font-size: 30rpx;
color: $text-color-base;
font-weight: 600;
}
}
}
</style>
效果如图：
3.png
第二板块代码如下：
<template>
<view class="container">
<!-- 头部布局 -->
<view class="banner">
<image src="https://s3.uuu.ovh/imgs/2024/12/01/0793d43c7403e3de.jpg" class="bg"></image>
<view class="intro">
<view class="greet">您好，游客</view>
<view class="note">一杯奶茶，一口软欧包，在云鲤遇见两种美好</view>
</view>
</view>
<view class="content">
<!-- 中间 自取 和 外卖 -->
<view class="entrance">
<view class="item">
<image src="/static/images/index/zq.png" class="icon"></image>
<view class="title">自取</view>
</view>
<view class="item">
<image src="/static/images/index/wm.png" class="icon"></image>
<view class="title">外卖</view>
</view>
</view>
<!-- 我的积分板块 -->
<view class="info">
<view class="integral_section">
<view class="top">
<text class="title">我的积分</text>
<text class="value">411</text>
</view>
<view class="bottom">
进入积分商城兑换云鲤券及周边好礼
<view class="iconfont iconarrow-right"></view>
</view>
</view>
<view class="qrcode_section">
<image src="/static/images/index/qrcode.png"></image>
<text>会员码</text>
</view>
</view>
<view class="navigators">
<!-- left 云鲤的茶商城 -->
<view class="left">
<view class="grid flex-column just-content-center">
<view class="d-flex align-items-center">
<image src="/static/images/index/csc.png" class="mark-img"></image>
<view class="font-size-sm text-color-base">云鲤的茶商城</view>
</view>
<view class="text-color-assist" style="margin-left: 40rpx; font-size: 20rpx;">优质茶礼盒，网红零食</view>
</view>
<view class="grid justify-content-end align-items-end">
<image src="/static/images/index/yzclh.png" class="yzclh-img" mode="heightFix"></image>
</view>
</view>
<!-- ringt 买茶送包 会员劵包 -->
<view class="right">
<view class="tea-activity" >
<image src="/static/images/index/mcsb.png" class="mark-img"></image>
<view>买茶送包</view>
<view class="right-img">
<image src="/static/images/index/mcsb_bg.png" mode="widthFix"></image>
</view>
</view>
<view class="member-gifts" >
<image src="/static/images/index/hyjb.png" class="mark-img"></image>
<view>会员劵包</view>
<view class="right-img">
<image src="/static/images/index/hyjb_bg.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
/* #ifdef H5 */
page {
height: auto;
min-height: 100%;
}
/* #endif */
.banner {
position: relative;
width: 100%;
height: 600rpx;
.bg {
width: 100%;
height: 600rpx;
}
.intro {
position: absolute;
top: calc(50rpx + var(--status-bar-height));
left: 40rpx;
color: #FFFFFF;
display: flex;
flex-direction: column;
.greet {
font-size: $font-size-lg;
margin-bottom: 10rpx;
}
.note {
font-size: $font-size-sm;
}
}
}
.content {
padding: 0 30rpx;
}
.entrance {
position: relative;
margin-top: -80rpx;
margin-bottom: 30rpx;
border-radius: 10rpx;
background-color: #ffffff;
box-shadow: $box-shadow;
padding: 30rpx 0;
display: flex;
align-items: center;
justify-content: center;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
&:nth-child(1):after {
content: '';
position: absolute;
width: 1rpx;
background-color: #ddd;
right: 0;
height: 100%;
transform: scaleX(0.5) scaleY(0.8);
}
.icon {
width: 84rpx;
height: 84rpx;
margin: 20rpx;
}
.title {
font-size: 30rpx;
color: $text-color-base;
font-weight: 600;
}
}
}
.info {
position: relative;
margin-bottom: 30rpx;
border-radius: 10rpx;
background-color: #ffffff;
box-shadow: $box-shadow;
padding: 30rpx;
display: flex;
align-items: center;
justify-content: center;
.integral_section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.top {
display: flex;
align-items: center;
.title {
color: $text-color-base;
font-size: $font-size-base;
margin-right: 10rpx;
}
.value {
font-size: 44rpx;
font-weight: bold;
}
}
.bottom {
font-size: $font-size-sm;
color: $text-color-assist;
display: flex;
align-items: center;
}
}
.qrcode_section {
color: $color-primary;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: $font-size-sm;
image {
width: 40rpx;
height: 40rpx;
margin-bottom: 10rpx;
}
}
}
.navigators {
width: 100%;
margin-bottom: 20rpx;
border-radius: 10rpx;
background-color: #ffffff;
box-shadow: $box-shadow;
padding: 20rpx;
display: flex;
align-items: stretch;
.left {
width: 340rpx;
margin-right: 20rpx;
display: flex;
padding: 0 20rpx;
flex-direction: column;
font-size: $font-size-sm;
color: $text-color-base;
background-color: #F2F2E6;
.grid {
height: 50%;
display: flex;
}
}
.right {
width: 290rpx;
display: flex;
flex-direction: column;
.tea-activity,
.member-gifts {
width: 100%;
display: flex;
padding: 20rpx;
font-size: $font-size-sm;
color: $text-color-base;
align-items: center;
position: relative;
}
.tea-activity {
background-color: #FDF3F2;
margin-bottom: 20rpx;
}
.member-gifts {
background-color: #FCF6D4;
}
.right-img {
flex: 1;
position: relative;
margin-left: 20rpx;
margin-right: -20rpx;
margin-bottom: -20rpx;
display: flex;
align-items: flex-end;
image {
width: 100%;
}
}
}
.mark-img {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
.yzclh-img {
height: 122.96rpx;
width: 214.86rpx;
}
}
</style>
效果如图：
4.png
第三板块代码如下：
<template>
<view class="container">
<!-- 头部布局 -->
<view class="banner">
<image src="https://s3.uuu.ovh/imgs/2024/12/01/0793d43c7403e3de.jpg" class="bg"></image>
<view class="intro">
<view class="greet">您好，游客</view>
<view class="note">一杯奶茶，一口软欧包，在云鲤遇见两种美好</view>
</view>
</view>
<view class="content">
<!-- 中间 自取 和 外卖 -->
<view class="entrance">
<view class="item">
<image src="/static/images/index/zq.png" class="icon"></image>
<view class="title">自取</view>
</view>
<view class="item">
<image src="/static/images/index/wm.png" class="icon"></image>
<view class="title">外卖</view>
</view>
</view>
<!-- 我的积分板块 -->
<view class="info">
<view class="integral_section">
<view class="top">
<text class="title">我的积分</text>
<text class="value">411</text>
</view>
<view class="bottom">
进入积分商城兑换云鲤券及周边好礼
<view class="iconfont iconarrow-right"></view>
</view>
</view>
<view class="qrcode_section">
<image src="/static/images/index/qrcode.png"></image>
<text>会员码</text>
</view>
</view>
<view class="navigators">
<!-- left 云鲤的茶商城 -->
<view class="left">
<view class="grid flex-column just-content-center">
<view class="d-flex align-items-center">
<image src="/static/images/index/csc.png" class="mark-img"></image>
<view class="font-size-sm text-color-base">云鲤的茶商城</view>
</view>
<view class="text-color-assist" style="margin-left: 40rpx; font-size: 20rpx;">优质茶礼盒，网红零食</view>
</view>
<view class="grid justify-content-end align-items-end">
<image src="/static/images/index/yzclh.png" class="yzclh-img" mode="heightFix"></image>
</view>
</view>
<!-- ringt 买茶送包 会员劵包 -->
<view class="right">
<view class="tea-activity" >
<image src="/static/images/index/mcsb.png" class="mark-img"></image>
<view>买茶送包</view>
<view class="right-img">
<image src="/static/images/index/mcsb_bg.png" mode="widthFix"></image>
</view>
</view>
<view class="member-gifts" >
<image src="/static/images/index/hyjb.png" class="mark-img"></image>
<view>会员劵包</view>
<view class="right-img">
<image src="/static/images/index/hyjb_bg.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<!-- 会员新鲜事 -->
<view class="member-news">
<view class="header">
<view class="title">会员新鲜事</view>
<view class="iconfont iconRightbutton"></view>
</view>
<view class="list">
<view class="item">
<image src="https://s3.uuu.ovh/imgs/2024/12/01/91c4a34528f7b66e.jpg"></image>
<view class="title">"梅"你不行 | 霸气杨梅清爽回归</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
/* #ifdef H5 */
page {
height: auto;
min-height: 100%;
}
/* #endif */
.banner {
position: relative;
width: 100%;
height: 600rpx;
.bg {
width: 100%;
height: 600rpx;
}
.intro {
position: absolute;
top: calc(50rpx + var(--status-bar-height));
left: 40rpx;
color: #FFFFFF;
display: flex;
flex-direction: column;
.greet {
font-size: $font-size-lg;
margin-bottom: 10rpx;
}
.note {
font-size: $font-size-sm;
}
}
}
.content {
padding: 0 30rpx;
}
.entrance {
position: relative;
margin-top: -80rpx;
margin-bottom: 30rpx;
border-radius: 10rpx;
background-color: #ffffff;
box-shadow: $box-shadow;
padding: 30rpx 0;
display: flex;
align-items: center;
justify-content: center;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
&:nth-child(1):after {
content: '';
position: absolute;
width: 1rpx;
background-color: #ddd;
right: 0;
height: 100%;
transform: scaleX(0.5) scaleY(0.8);
}
.icon {
width: 84rpx;
height: 84rpx;
margin: 20rpx;
}
.title {
font-size: 30rpx;
color: $text-color-base;
font-weight: 600;
}
}
}
.info {
position: relative;
margin-bottom: 30rpx;
border-radius: 10rpx;
background-color: #ffffff;
box-shadow: $box-shadow;
padding: 30rpx;
display: flex;
align-items: center;
justify-content: center;
.integral_section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.top {
display: flex;
align-items: center;
.title {
color: $text-color-base;
font-size: $font-size-base;
margin-right: 10rpx;
}
.value {
font-size: 44rpx;
font-weight: bold;
}
}
.bottom {
font-size: $font-size-sm;
color: $text-color-assist;
display: flex;
align-items: center;
}
}
.qrcode_section {
color: $color-primary;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: $font-size-sm;
image {
width: 40rpx;
height: 40rpx;
margin-bottom: 10rpx;
}
}
}
.navigators {
width: 100%;
margin-bottom: 20rpx;
border-radius: 10rpx;
background-color: #ffffff;
box-shadow: $box-shadow;
padding: 20rpx;
display: flex;
align-items: stretch;
.left {
width: 340rpx;
margin-right: 20rpx;
display: flex;
padding: 0 20rpx;
flex-direction: column;
font-size: $font-size-sm;
color: $text-color-base;
background-color: #F2F2E6;
.grid {
height: 50%;
display: flex;
}
}
.right {
width: 290rpx;
display: flex;
flex-direction: column;
.tea-activity,
.member-gifts {
width: 100%;
display: flex;
padding: 20rpx;
font-size: $font-size-sm;
color: $text-color-base;
align-items: center;
position: relative;
}
.tea-activity {
background-color: #FDF3F2;
margin-bottom: 20rpx;
}
.member-gifts {
background-color: #FCF6D4;
}
.right-img {
flex: 1;
position: relative;
margin-left: 20rpx;
margin-right: -20rpx;
margin-bottom: -20rpx;
display: flex;
align-items: flex-end;
image {
width: 100%;
}
}
}
.mark-img {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
.yzclh-img {
height: 122.96rpx;
width: 214.86rpx;
}
}
.member-news {
width: 100%;
margin-bottom: 30rpx;
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
.title {
font-size: $font-size-lg;
font-weight: bold;
}
.iconfont {
font-size: 52rpx;
color: $text-color-assist;
}
}
.list {
width: 100%;
display: flex;
flex-direction: column;
.item {
width: 100%;
height: 240rpx;
position: relative;
image {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.title {
position: relative;
font-size: 32rpx;
font-weight: 500;
width: 100%;
top: -70rpx;
left: 16rpx;
color: #ffffff;
}
}
}
}
</style>
效果如图：
5.png
界面编写完成！
