|
|
@@ -1,232 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="container">
|
|
|
- <custom-header name="飞鸟灵境"></custom-header>
|
|
|
- <div class="content">
|
|
|
- <select-group class="select-wrap" @gardenList="gardenList" @toggle="toggle"></select-group>
|
|
|
- <div class="video">
|
|
|
- <video ref="myVideo" class="mp4" autoplay loop muted @canplay="onVideoReady">
|
|
|
- <source src="@/assets/img/home/video.mp4" type="video/mp4">
|
|
|
- </video>
|
|
|
- </div>
|
|
|
- <div class="button button-bg" @click="handleGarden">逛逛果园</div>
|
|
|
- <icon-group v-show="showIcon" @click="handleDetail"></icon-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 果园详情弹窗 -->
|
|
|
- <popup class="garden-popup" v-model:show="showDetail" round closeable>
|
|
|
- <img src="@/assets/img/mine/gy-img.png" alt="">
|
|
|
- <!-- <div class="garden-title">{{ garden.title }}</div>
|
|
|
- <div class="garden-wrap">
|
|
|
- <div class="garden-cont">
|
|
|
- <div class="title">{{ garden.aboutTitle }}</div>
|
|
|
- <div class="desc">
|
|
|
- <div class="text">{{ garden.about }}</div>
|
|
|
- <div class="text">{{ garden.text }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="garden-cont">
|
|
|
- <div class="title">{{ garden.hisTitle }}</div>
|
|
|
- <div class="desc">
|
|
|
- <div class="text">{{ garden.his }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="garden-cont">
|
|
|
- <div class="title">{{ garden.professionTitle }}</div>
|
|
|
- </div>
|
|
|
- <div class="garden-cont">
|
|
|
- <div class="title">{{ garden.featureTitle }}</div>
|
|
|
- <div class="feature">
|
|
|
- <div class="text">{{ garden.content }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- </popup>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import selectGroup from "@/components/selectGroup.vue";
|
|
|
-import { onActivated, onMounted, ref } from "vue";
|
|
|
-import { Popup } from "vant";
|
|
|
-import { useRouter } from "vue-router";
|
|
|
-import customHeader from "@/components/customHeader.vue";
|
|
|
-import iconGroup from "../components/iconGroup.vue";
|
|
|
-const router = useRouter();
|
|
|
-
|
|
|
-const handleGarden = () => {
|
|
|
- router.push("/garden");
|
|
|
-};
|
|
|
-
|
|
|
-const showIcon = ref(true)
|
|
|
-function toggle(value){
|
|
|
- showIcon.value = !value
|
|
|
-}
|
|
|
-
|
|
|
-const gardenData = [
|
|
|
- {
|
|
|
- id: 19,
|
|
|
- title: "广州从化荔博园",
|
|
|
- aboutTitle: "关于我们",
|
|
|
- about: `广州市从化区荔枝文化博览园位于于广州市从化江埔街九里步，园区内共有116个荔枝品种，其中18个是国家荔枝良种重大科研联合攻关生产试验品种(含对照品种)，这里是创建荔枝产业优质种质的基因库。`,
|
|
|
- text: `博览园主要功能是 “一库两园三平台”“一库”是指荔枝产业优质种质资源库。“两园”是指荔枝科技创新园、5G智慧荔枝园。“三平台”是指荔枝科技技术示范推广平台荔农致富创业指导培训平台、广东特质农产品交易平台。`,
|
|
|
- hisTitle: "文化历史",
|
|
|
- his: `广州从化荔博园与华南农业大学、广东省省农科院联合共建荔枝产业研究院，是国家荔枝龙眼产业技术体系示范基地、国家荔枝良种重大科研联合攻关生产试验基地、国家天地昆虫科技创新联盟技术研发应用示范基地。`,
|
|
|
- professionTitle: "专业技术",
|
|
|
- profession: [
|
|
|
- {
|
|
|
- title: "智能化无人机飞巡平台",
|
|
|
- url: "",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "现代化智能作业设备",
|
|
|
- url: "",
|
|
|
- },
|
|
|
- ],
|
|
|
- featureTitle: "特色产品",
|
|
|
- feature: {
|
|
|
- content:
|
|
|
- '<div style="text-indent: 2em;">一颗北园绿分九口吃完。第一口先吃龙头(北园绿果身饱满，左右两肩耸起，一高一低，高者称之为龙头，低者称之为凤尾，有龙凤呈祥之意)一口咬下，便会感觉到[嗦]的一声脆响，然后再吃凤尾，再沿着龙头和凤尾向下吃，共分九口吃完，最后满心欢喜地吐出果核。</div>',
|
|
|
- tip: "记住：品尝珍品时切忌囫囵吞枣，牛嚼牡丹，要注意仪态，细嚼慢咽，否则品尝不到北园绿的精华。",
|
|
|
- url: "https://birdseye-img-ali-cdn.sysuimars.com/foster/byl-detail/feature-bg.png",
|
|
|
- },
|
|
|
- },
|
|
|
-];
|
|
|
-const garden = gardenData[0];
|
|
|
-const showDetail = ref(true);
|
|
|
-const handleDetail = () => {
|
|
|
- showDetail.value = true;
|
|
|
-};
|
|
|
-
|
|
|
-const myVideo = ref(null)
|
|
|
-const onVideoReady = () =>{
|
|
|
- myVideo.value.play()
|
|
|
-}
|
|
|
-
|
|
|
-onActivated(()=>{
|
|
|
- // showDetail.value = false
|
|
|
- myVideo.value.play()
|
|
|
-})
|
|
|
-
|
|
|
-function gardenList(arr) {
|
|
|
- // console.log('arr',arr);
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(() => {});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.container {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh - 40px);
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- .select-wrap {
|
|
|
- position: absolute;
|
|
|
- top: 15px;
|
|
|
- left: 15px;
|
|
|
- width: calc(100% - 30px);
|
|
|
- height: 40px;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- .video {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- .mp4{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- }
|
|
|
- .button {
|
|
|
- position: absolute;
|
|
|
- left: 48px;
|
|
|
- bottom: 50px;
|
|
|
- width: calc(100% - 48px * 2);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.button-bg {
|
|
|
- background: linear-gradient(0deg, #18e0ff, #00c5e3);
|
|
|
- border-radius: 30px;
|
|
|
- border: 1px solid #fff;
|
|
|
- font-size: 18px;
|
|
|
- padding: 11px;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.garden-popup {
|
|
|
- width: 85%;
|
|
|
- height: 70%;
|
|
|
- overflow: auto;
|
|
|
- background-image: url("https://birdseye-img-ali-cdn.sysuimars.com/foster/detail/bg.png");
|
|
|
- background-size: cover;
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .garden-title {
|
|
|
- width: 76%;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- font-size: 19px;
|
|
|
- margin: 50px auto 15px auto;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- background: url("@/assets/img/home/garden-title.png") no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- .garden-wrap {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 110px);
|
|
|
- padding: 0 8px;
|
|
|
- overflow-y: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .garden-cont {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 34px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: url("@/assets/img/home/garden-cont.png") no-repeat center center / 100% 100%;
|
|
|
- .title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #4e9fa1;
|
|
|
- border: 1px solid #4e9fa1;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 0 10px;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
- .desc {
|
|
|
- .text {
|
|
|
- text-indent: 2em;
|
|
|
- line-height: 1.6;
|
|
|
- }
|
|
|
- .text + .text {
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- .feature {
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- background: url("@/assets/img/home/feature-bg.png") no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .garden-cont + .garden-cont {
|
|
|
- position: relative;
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: -24px;
|
|
|
- height: 38px;
|
|
|
- width: 70%;
|
|
|
- background: url("@/assets/img/home/garden-line.png") no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
wangsisi