From 5f9d18d46e302bf0dd78527baa37a141e4de799e Mon Sep 17 00:00:00 2001
From: Apcallover <1503963513@qq.com>
Date: Tue, 20 Feb 2024 12:02:52 +0800
Subject: [PATCH] =?UTF-8?q?flat:=20style=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json              |   9 ++-
 pages/index/index.vue   |  67 ++++++++++++++++--
 pages/market/market.vue | 152 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 219 insertions(+), 9 deletions(-)

diff --git a/pages.json b/pages.json
index 6b1e0da..dd4105f 100644
--- a/pages.json
+++ b/pages.json
@@ -199,8 +199,13 @@
         	"path" : "pages/market/market",
         	"style" : 
         	{
-        		"navigationBarTitleText" : "",
-        		"enablePullDownRefresh" : false
+        		"navigationBarTitleText" : "市场详情",
+                "navigationBarBackgroundColor": "#4570fa",
+        		"enablePullDownRefresh" : false,
+                "navigationBarTextStyle": "white",
+                "navigationBarShadow": {
+                    "colorType": "none"
+                }
         	}
         }
     ],
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4f4fabb..fef8150 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -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;
diff --git a/pages/market/market.vue b/pages/market/market.vue
index 327cf80..54f4ea9 100644
--- a/pages/market/market.vue
+++ b/pages/market/market.vue
@@ -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>