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">
                            <view class="fs_28">1</view>
                            <view class="fs_24">主市场</view>
                        </view>
                        <view class="content_item">
                            <view class="fs_28">15</view>
                            <view class="fs_24">分市场</view>
                        </view>
                        <view class="content_item">
                            <view class="fs_28">136</view>
                            <view class="fs_24">服务站</view>
                        </view>
                    </view>
                </view>
                <view class="head_right">
                    <image src="../../static/img/deyang.png"></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>
                四川省德阳市旌阳区天山南路1段108号
                <!-- <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">距离我7km</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>