jobslink-user-clent/pages/market/market.vue

<template>
	<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="fs_28">10</view>
                            <view class="fs_24">分市场</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 class="container_chioe">
            <view class="chioe_share color_666 fs_24">
                <u-icon name="share" color="#666666" size="16"></u-icon>分享
            </view>
            <view class="chioe_btn">电话咨询</view>
            <view class="chioe_btn btn_Blue">到这去</view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<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;
                    }
                }
            }
            .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;
        }
    }
    
    .container_chioe{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #FFFFFF;
        height: designTo(108rpx);
        padding: 0 28rpx designTo(30rpx) 28rpx;
        .chioe_share{
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
        .chioe_btn{
            color: #FFFFFF;
            background: linear-gradient(to right, #fbaf1a, #fbaf1a);
            height: designTo(66rpx);
            width: designTo(228rpx);
            text-align: center;
            line-height: designTo(66rpx);
            border-radius: designTo(33rpx);
        }
        .btn_Blue{
             background: linear-gradient(to right, #95aefb, #4b74f7);
        }
    }
}
</style>