<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-23 17:14:02
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-09-21 21:04:33
 * @FilePath: \housekeeping-uniapp\src\bundle\pages\service_explain\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="main">
        <view class="my-3 text-3xl font-bold flex justify-center">
            <view class="title">粤好生活服务说明</view>
        </view>
        <u-image
            src="@/static/images/service/1.jpg"
            width="100%"
            height="560"
            class="image"
            mode="scaleToFill"
        ></u-image>
        <u-image
            src="@/static/images/service/2.jpg"
            width="100%"
            height="560"
            class="image"
            mode="scaleToFill"
        ></u-image>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
</script>

<style lang="scss" scoped>
.main {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fefefe;
    .image {
        flex: 1;
    }
}
.title {
    background-image: linear-gradient(to right, #1b4655, #675fe9);
    -webkit-background-clip: text;
    color: transparent;
    position: relative;
    &::after {
        content: '';
        width: 100%;
        height: 3px;
        position: absolute;
        background: $u-type-primary;
        bottom: -3px;
        left: 0;
    }
}
</style>
