sdz/jobslink-user-clent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flat: style更新

Browse Source
This commit is contained in:
Apcallover
2024-02-20 12:02:52 +08:00
parent 779aad2016
commit 5f9d18d46e
3 changed files with 219 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
pages.json
View File

@@ -199,8 +199,13 @@
"path" : "pages/market/market",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
"navigationBarTitleText" : "市场详情",
"navigationBarBackgroundColor": "#4570fa",
"enablePullDownRefresh" : false,
"navigationBarTextStyle": "white",
"navigationBarShadow": {
"colorType": "none"
}
}
}
],

67
pages/index/index.vue
View File

@@ -116,12 +116,12 @@
<image class="Icon_size" src="../../static/img/index/shenqing.png" mode=""></image>
</view>
<view class="itemText">
<view class="font30">我的申请</view>
<view class="font30">最新政策</view>
<view class="font22">我申请的信息</view>
</view>
</view>
</view>
<view class="serviceItem" @click="">
<!-- <view class="serviceItem" @click="">
<view class="serviceItemContent">
<view class="itemIcon">
<image class="Icon_size" src="../../static/img/index/shoucang.png" mode=""></image>
@@ -142,7 +142,7 @@
<view class="font22">我浏览的信息</view>
</view>
</view>
</view>
</view> -->
</view>
<view class="helpSupport">
<view class="cardTips">帮助与支持</view>
@@ -184,6 +184,18 @@
</view>
</view>
</view>
<view class="info_market">
<view class="market_top">
<view class="top_log"></view>
<view class="next_market" @click="navTo('/pages/market/market')">去市场</view>
</view>
<view class="market_bottom">
<view>了解市场<u-icon name="arrow-right" color="#666666" size="13"></u-icon></view>
<view>我要咨询<u-icon name="arrow-right" color="#666666" size="13"></u-icon></view>
</view>
</view>
<view class="latestMission">
<view class="cardTips" style="margin: 0 26rpx;display: flex;align-items: center;justify-content: space-between;padding-bottom: 10rpx;">
<view>最新资讯</view>
@@ -507,6 +519,53 @@
</script>
<style lang="scss">
.info_market{
margin: 24rpx;
height: fit-content;
background-color: #FFFFFE;
border-radius: 18rpx;
display: flex;
flex-direction: column;
overflow: hidden;
.market_top{
background: url(@/static/img/index/bannerBg.png) no-repeat center center;
background-size: 100% 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx;
.top_log{
background: url(@/static/img/index/inLogo.png) no-repeat center center;
background-size: cover;
height: 60rpx;
width: 400rpx;
}
.next_market{
font-size: 26rpx;
color: #FFFFFF;
background: linear-gradient(to right, rgba(137, 168, 253, 1), rgba(87, 129, 250, 1));
width: 120rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
border-radius: 30rpx;
font-weight: bold;
}
}
.market_bottom{
font-size: 32rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: space-around;
view{
display: flex;
}
}
}
.home_logo{
background: url(@/static/img/index/inLogo.png) no-repeat center center;
background-size: cover;
@@ -682,7 +741,7 @@
.jobService {
width: 100%;
height: 620rpx;
height: 440rpx;
background: #FEFFFE;
margin-top: 16rpx;
padding: 24rpx 0rpx 0rpx 32rpx;

152
pages/market/market.vue
View File

@@ -1,6 +1,46 @@
<template>
<view>
市场详情页面
<view class="app_container">
<view class="container_head">
<view class="row">
<view class="head_left">
<view class="left_title">在石家庄开设</view>
<view class="left_content">
<view class="content_item" v-for="(item,i) in 3" :key="i">
<view class="item_up">10</view>
<view class="item_down">分市场</view>
</view>
</view>
</view>
<view class="head_right">
<image src="../../static/img/pic.svg"></image>
</view>
</view>
<view class="broadcast">
<view class="cast-l"><u-icon style="margin-right: 10rpx;" name="volume" color="#fb6a09" size="20"></u-icon>周六常态化招聘会通知</view>
<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
</view>
</view>
<view class="conatiner_card">
<view class="row blod fs_34">世纪城灵活就业</view>
<view class="row color_666 fs_30 marT_30">
<u-icon style="margin-right: 10rpx;" name="calendar" color="#666666" size="16"></u-icon>营业时间
</view>
<view class="row color_666 fs_30">上午9:00-12:00 下午14:00-18:00</view>
<view class="row color_666 fs_30 marT_30">
<u-icon style="margin-right: 10rpx;" name="map" color="#666666" size="16"></u-icon>
河北省石家庄
<u-icon style="margin-left: 10rpx;" name="arrow-right" color="#666666" size="16"></u-icon>
</view>
<view class="row color_666 fs_28 marT_10">
<view class="column">距离我1167.km</view>
</view>
</view>
<view class="conatiner_card">
<view class="row blod fs_34">关于市场</view>
<view class="row color_666 fs_30">.......</view>
</view>
</view>
</template>
@@ -17,6 +57,112 @@
}
</script>
<style>
<style lang="scss" scoped>
@function designTo($num) {
@return ($num / 620rpx) * 750rpx
}
@for $i from 10 to 60{
.fs_#{$i} {
font-size : #{$i}rpx;
}
}
@for $i from 1 to 60{
.marT_#{$i} {
margin-top : #{$i}rpx;
}
}
.color_666{
color: #666666;
}
.bold{
font-weight: bold;
}
image{
width: 100%;
height: 100%;
}
.app_container{
background-color: #f3f4f8;
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
.container_head{
min-height: 300rpx;
padding: 28rpx;
background: linear-gradient(to bottom, rgba(69, 112, 250, 1), rgba(69, 112, 250, .0));
.row{
display: flex;
align-content: center;
justify-content: space-between;
.head_left{
color: #FFFFFF;
display: flex;
align-items: flex-start;
flex-direction: column;
.left_title{
}
.left_content{
height: designTo(87rpx);
width: designTo(313rpx);
background-color: rgba(69, 104, 252, 0.4);
border-radius: 20rpx;
margin-top: 20rpx;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
.content_item{
text-align: center;
white-space: nowrap;
.item_up{
font-size: 28rpx;
}
.item_down{
font-size: 24rpx;
}
}
}
}
.head_right{
width: designTo(220rpx);
height: designTo(148rpx);
border-radius: 20rpx;
overflow: hidden;
}
}
.broadcast{
margin-top: designTo(65rpx);
height: designTo(77rpx);
background-color: rgba(244, 230, 224, 1);
border-radius: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24rpx;
.cast-l{
font-size: 32rpx;
display: flex;
}
}
}
.conatiner_card{
margin: 28rpx;
background-color: #FFFFFF;
height: fit-content;
border-radius: 20rpx;
padding: designTo(28rpx);
.row{
display: flex;
align-items: center;
}
.column{
padding: 10rpx 20rpx;
border-radius: 40rpx;
background-color: #f3f4f8;
}
}
}
</style>