import { View, Image } from "@tarojs/components"
import bgFingerpost from "@/assets/bg/bg-fingerpost.png"
import mapImg from "@/assets/bg/map-img.png"
import icon35 from "@/assets/icon/icon35.png"
import './userFingerpost.less'
import { useState } from "react"

const UserFingerpost = () => {
    const [list] = useState([
        {
            title: '上报问题范围',
            content: '您可以通过市民之声上报市容秩序问题、公用设施、道路交通设施、市容环境设施、园林绿化设施、其他部件、市容环境、宣传广告、施工管理'
        },
        {
            title: '区域指导',
            content: '您可以上报新都区内的城市管理问题。'
        },
        {
            title: '问题分类管理',
            content: '市容秩序问题包含XXXX问题,XXX问题。'
        },
        {
            title: '问题紧急性',
            content: '涉及安全性的问题建议及时上报，涉及流动性较大的建议观察上报，建议长期未解决的市容问题发现就报。'
        },
        {
            title: '区域边界管理',
            content: <Image style={{ width: '100%', height: '205rxp' }} src={mapImg} />
        },

    ])

    return <View className="pageBox">
        <Image style={{ width: '100%', height: '280rpx' }} src={bgFingerpost} />
        {list.map((v, i) => {
            const { title, content } = v
            return <View className="itemBox" key={i}>
                <View className="title">
                    <Image style={{ width: 20, height: 'auto' }} mode='widthFix' src={icon35} />
                    {title}
                </View>
                <View className="txt">{content}</View>
            </View>
        })}
    </View>
}

export default UserFingerpost