公告

董国庆

2025-12-30 e9c6e5604193281047a00a33555f9dc5a779a2f2

公告

 miniprogram/pages.json

@@ -52,6 +52,20 @@
            "style": {
                "navigationStyle": "custom"
            }
        },
        {
            "path": "pages/notice/notice",
            "style": {
                "navigationBarTitleText": "景区公告",
                "navigationBarBackgroundColor": "#fff"
            }
        },
        {
            "path": "pages/notice/detail",
            "style": {
                "navigationBarTitleText": "景区公告",
                "navigationBarBackgroundColor": "#fff"
            }
        }
    ],
    "tabBar": {

 miniprogram/pages/home/home.vue

@@ -31,7 +31,7 @@
                <view class="mt-17 fs-25 lh-35 color3 ml-29">景区地图</view>
                <image src="/static/image/home/bg2.png" class="w-154 h-115 absolute" style="right: 2rpx;top: 15rpx;" />
            </view>
            <view class="relative br-19 bgcolor6 pt-27 pb-29">
            <view class="relative br-19 bgcolor6 pt-27 pb-29" @tap="toNotice()">
                <view class="flex a-center br-154 py-12 px-12 ml-27 bgcolor7 w-fit">
                    <view class="fs-27 lh-23 font-bold mr-4 color4">景区公告</view>
                    <image class="w-19 h-19 ml-4 shrink0" src="/static/image/home/Group@2x (7).png" />
@@ -60,7 +60,8 @@
            </view>
            <view class="listBox">
                <view v-for="item in 10" :key="item" class="relative">
                    <image class="br-19" style="height: 396rpx;width: 346rpx;" src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png" />
                    <image class="br-19" style="height: 396rpx;width: 346rpx;"
                        src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png" />
                    <view class="absolute flex a-center br-138 h-35 pl-15 pr-12 bgcolor10"
                        style="top: 12rpx;right: 12rpx;">
                        <image src="/static/image/home/Shape@2x.png" class="w-19 h-19 shrink0 mr-8" />
@@ -107,6 +108,11 @@
            appId: 'wxe6843e111c37fa99'
        })
    }
    const toNotice = () => {
        uni.navigateTo({
            url: '/pages/notice/notice'
        })
    }
</script>
<style>
    page {

 miniprogram/pages/notice/detail.vue

New file
@@ -0,0 +1,167 @@
<template>
    <view class="relative">
        <image @tap.stop="back" class="absolute w-19 h-34" src="/static/image/public/back.png"
            style="top: 104rpx;left: 27rpx;z-index: 99;" />
        <banner :list="list" :height="700"></banner>
        <view style="transform: translateY(-56rpx);">
            <view class="bgcolor1 br1 px-27 pt-38 pb-27">
                <view class="fs-46 font-bold lh-63">{{ detailInfo.name || '' }}</view>
                <view class="mt-27 flex a-center j-between mb-34">
                    <view class="flex a-center">
                        <image class="w-19 h-19 mr-6" src="/static/image/public/time.png" />
                        <view class="time">{{detailInfo.time||""}}</view>
                    </view>
                    <view class="flex a-center">
                        <image class="w-25 h-19 mr-6" src="/static/image/public/read.png" />
                        <view class="time">{{detailInfo.read||0}}</view>
                    </view>
                </view>
                <rich-text :nodes="content"></rich-text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { onLoad } from '@dcloudio/uni-app'
    import banner from "@/components/banner.vue";
    import config from '../../config/index.js'

    const list = ref([
        { imageUrl: 'https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' },
        { imageUrl: 'https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_1280.jpg' },
        { imageUrl: 'https://images.pexels.com/photos/2908986/pexels-photo-2908986.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' },
        { imageUrl: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg' },
        { imageUrl: 'https://images.pexels.com/photos/129105/pexels-photo-129105.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' }]);
    const content = ref<string>(`<h2 style="color: #1a5f7a; text-align: center; margin: 20px 0 10px; font-size: 18px;">丽江古城 - 高原上的水墨古城</h2>
        <p style="color: #333; font-size: 14px; line-height: 1.8; margin: 10px 8px; text-indent: 2em;">
          丽江古城位于云南省丽江市古城区，又名大研古城，是中国历史文化名城之一，也是世界文化遗产。古城始建于宋末元初，距今已有八百多年历史，这里没有规整的道路布局，依山傍水而建，青石板路蜿蜒曲折，小桥流水人家错落有致，宛如一幅流动的水墨画卷。
        </p>
        <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg" alt="丽江古城全景" style="width: 100%; height: auto; margin: 16px 0; border-radius: 10px;" />
        <p style="color: #333; font-size: 14px; line-height: 1.8; margin: 10px 8px;">
          古城内的四方街是核心区域，也是昔日的商贸集散地，如今依旧热闹非凡，摆满了各类特色小吃和手工艺品。夜晚的丽江古城更是迷人，红灯笼挂满街巷，河水倒映着光影，酒吧街的民谣声悠扬婉转，既有古色古香的韵味，又有现代文艺的气息。
        </p>
        <img src="https://images.pexels.com/photos/129105/pexels-photo-129105.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="丽江古城小桥流水" style="width: 100%; height: auto; margin: 16px 0; border-radius: 10px;" />
        <p style="color: #666; font-size: 12px; line-height: 1.6; margin: 10px 8px;">
          旅行小贴士：1. 古城内石板路较多，建议穿舒适的平底鞋；2. 特色美食推荐腊排骨火锅、鸡豆凉粉；3. 避免在旺季（节假日、暑期）前往，可减少拥挤。
        </p>`);
    const detailInfo = ref({
        name: '泡温泉看电影 品美食看川剧 青城山下一起邂逅冬日浪漫',
        time: '2025-11-30', read: 0, id: ''
    })
    onLoad((query) => {
        // getBigInfo(query.id).then(res => {
        //     if (res.code == 200) {
        //         list.value = res.data.detailedImage.split(',').map(item => {
        //             return {
        //                 imageUrl: config.imageUrl + item
        //             }
        //         })
        //         if (res.data.detailedDescription) {
        //             res.data.detailedDescription = res.data.detailedDescription.replace(/<img/gi,
        //                 '<img style="max-width:100%;height:auto;margin:0 auto;display:block"')
        //         }
        //         content.value = res.data.detailedDescription
        //         detailInfo.value = res.data
        //     }
        // })

    })
    const back = () => {
        uni.navigateBack()
    }
</script>

<style>
    page {
        background-color: #f5f5f5;
    }
</style>
<style scoped lang="scss">
    .bgcolor1 {
        background-color: #fff;
    }

    .color1 {
        color: rgba(0, 0, 0, 0.5);
    }

    .color2 {
        color: #ff4d4f;
    }

    .color3 {
        color: rgba(0, 0, 0, 0.45);
    }

    .br1 {
        border-radius: 38rpx 38rpx 0rpx 0rpx;
    }

    .time {
        font-weight: bold;
        font-size: 23rpx;
        color: rgba(0, 0, 0, 0.45);
        line-height: 27rpx;
    }

    .videoContent {
        position: relative;
        z-index: 99;

        #myVideo {
            width: 100%;
            height: 603rpx;
            z-index: 99;
            // opacity: 0.2;
        }

        .midBOF {
            width: 81rpx;
            height: 81rpx;
            position: absolute;
            bottom: 256rpx;
            z-index: 999;
            left: 47%;
        }

        .video-controls {
            position: absolute;
            bottom: 59rpx;
            display: flex;
            z-index: 999;
            width: 100%;
            padding: 0 50rpx;
            box-sizing: border-box;
            justify-content: space-between;
            align-items: center;
        }

        .slideBox {
            display: inline-block;
            width: 80%;

            .videoTime {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 21rpx;
            }

            .nowtime {
                height: 16rpx;
                font-family: PingFang;
                font-weight: bold;
                font-size: 21rpx;
                color: #FFFFFF;
                line-height: 40rpx;
            }
        }

        .slider {
            width: 70%;
            // width: 500px;
        }
    }
</style>

 miniprogram/pages/notice/notice.vue

New file
@@ -0,0 +1,161 @@
<template>
    <view class="px-27 py-27">
        <view class="search">
            <u-search placeholder-color="rgba(0,0,0,0.4)" search-icon-color="RGBA(152, 152, 152, 1)"
                placeholder="搜索公告标题" style="line-height: 62rpx;" :action-style="actionStyle" v-model="keyword"
                @search="fetchList" @custom="fetchList" @clear="fetchList"></u-search>
            <!-- <u-search></u-search> -->
        </view>
        <view class="px-11">
            <view class="list-item" v-for="(item,index) in list" @tap="toDetail(item)">
                <view class="flex flex-column j-between">
                    <view class="list-title mt-3 line2">{{item.title||''}}</view>
                    <view class="flex a-center">
                        <image src="/static/image/public/time.png" class="w-19 h-19 mr-5 shrink0" />
                        <view class="list-time">{{item.time||''}}</view>
                    </view>
                </view>
                <image :src="item.img" class="list-img" />
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { onLoad, onUnload, onShow, onReachBottom } from "@dcloudio/uni-app";
    const actionStyle = ref({
        'width': '135rpx',
        'height': '62rpx',
        'background': '#06C584',
        'border-radius': '67rpx',
        'font-weight': '500',
        'font-size': '23rpx',
        'color': '#FFFFFF',
        'line-height': '62rpx'
    })
    const keyword = ref('')
    const list = ref([{
        id: '1', img: 'https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', title: '泡温泉看电影 品美食看川剧 青城山下', introduce: '景区官方徒步路线推荐', time: '2025-11-30'
    }, {
        id: '2', img: 'https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_1280.jpg', title: '泡温泉看电影 品美食看川剧 青城山下', introduce: '景区官方徒步路线推荐', time: '2025-11-30'
    }, {
        id: '3', img: 'https://images.pexels.com/photos/2908986/pexels-photo-2908986.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', title: '泡温泉看电影 品美食看川剧 青城山下', introduce: '景区官方徒步路线推荐', time: '2025-11-30'
    }, {
        id: '4', img: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_1280.jpg', title: '泡温泉看电影 品美食看川剧 青城山下', introduce: '景区官方徒步路线推荐', time: '2025-11-30'
    }, {
        id: '5', img: 'https://images.pexels.com/photos/129105/pexels-photo-129105.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', title: '泡温泉看电影 品美食看川剧 青城山下', introduce: '景区官方徒步路线推荐', time: '2025-11-30'
    }])


    onShow(() => {

    })
    onLoad(() => {

    })
    onReachBottom(() => {

    })
    const fetchList = () => {
        //         // if (loading.value || finished.value) return
        //         loading.value = true
        //         getMonitorList({
        //             nameOrCode: keyword.value || '',
        //             pageNum: searchParams.value.pageNum,
        //             pageSize: searchParams.value.pageSize
        //         }).then(res => {
        //             // PC 端类型定义：{ records, total, current, size }
        //             const data = res.data || res || {}
        //             const records = data.records || []
        //             const total = data.total || 0

        //             if (searchParams.value.pageNum === 1) {
        //                 list.value = records
        //             } else {
        //                 list.value = list.value.concat(records)
        //             }

        //             // 判断是否已全部加载
        //             if (!records.length || list.value.length >= total) {
        //                 finished.value = true
        //             } else {
        //                 searchParams.value.pageNum += 1
        //             }
        //         }).catch(() => {
        //             uni.showToast({
        //                 title: '获取巡检列表失败',
        //                 icon: 'none'
        //             })
        //         }).finally(() => {
        //             loading.value = false
        //         })
    }

    const toDetail = (item) => {
        uni.navigateTo({
            url: 'pages/notice/detail'
        })
    }
</script>

<style>
    page {
        background-color: #ffffff;
    }
</style>
<style scoped lang="scss">
    .u-search {
        width: 696rpx;
        height: 77rpx;
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0rpx 8rpx 31rpx 0rpx rgba(0, 99, 65, 0.1);
        border-radius: 38rpx;
        border: 2rpx solid #06C584;
    }

    .search {
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0rpx 8rpx 31rpx 0rpx rgba(0, 99, 65, 0.1);
        border-radius: 38rpx;
        border: 2rpx solid #06C584;
        padding: 7rpx;
        box-sizing: border-box;
    }

    .list-item {
        margin-top: 38rpx;
        border-radius: 19rpx;
        display: flex;
        // align-items: center;

        .list-img {
            width: 201.92rpx;
            height: 148.08rpx;
            border-radius: 19rpx;
            flex-shrink: 0;
            margin-left: 28rpx;
        }

        .list-title {
            font-weight: 600;
            font-size: 31rpx;
            color: #191F3F;
            line-height: 42rpx;
        }

        .list-instro {
            font-weight: 500;
            font-size: 27rpx;
            color: #8E92AA;
            line-height: 38rpx;
        }

        .list-time {
            font-weight: bold;
            font-size: 23rpx;
            color: rgba(0, 0, 0, 0.45);
            line-height: 27rpx;
        }
    }
</style>

 miniprogram/pages/strategy/strategy.vue

@@ -7,7 +7,7 @@
            <!-- <u-search></u-search> -->
        </view>
        <view class="list">
            <view class="list-item" v-for="(item,index) in list">
            <view class="list-item" v-for="(item,index) in list" @tap="toDetail(item)" :key="index">
                <image :src="item.img" class="list-img" />
                <view class="flex flex-column j-between">
                    <view>
@@ -95,8 +95,10 @@
        //         })
    }

    const toOrderDetail = (item) => {

    const toDetail = (item) => {
        uni.navigateTo({
            url: '/pages/strategy/detail'
        })
    }
</script>