巫溪

project/wuxi/h5/AppDetail/AppDetail.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="AppDetail">
+    <!-- <div class="top-title">{{tabList[tabIndex]}}</div> -->
+    <div class="home-content">
+      <div class="tab">
+        <div :class="tabIndex == index ? 'item active': 'item'" v-for="(item, index) in tabList" :key="index" @click="tabIndex=index">{{ item }}</div>
+      </div>
+      <div class="tab-content" v-if="tabIndex == 0">
+        <div class="title">天地灵气 逍遥巫溪</div>
+        <p>
+          “天地灵巫,融水汇溪”。巫溪由此得名,古称“上古盐都”,今誉“峡郡桃源”。全县幅员面积4030平方公里,辖32个乡镇(街道),户籍人口54万。
+          获得了“全国文明城市”“国家卫生县城”“国家园林县城”“中国人居环境范例奖”“全国森林旅游示范县”“全国药材生产红旗县”等殊荣,为长江三峡“
+          黄金三角”文旅协同发展示范区。2023年,全县地区生产总值130.6亿元、同比增长6:5%。
+        </p>
+        <img src="./img/detail-ljwx.png" alt="">
+      </div>
+      <div class="tab-content" v-if="tabIndex == 1">
+        <div class="title">“巫巴文化”的故乡</div>
+        <p>
+          始建于汉建安十五年,历代政区迭变,悠久的历史积淀了厚重的“巴风巫韵”曾创造出“利分秦楚域,泽沛汉唐年”“一泉流白玉万里走黄金”的辉煌,
+          孕育了神秘的巫文化、盐文化。巫溪县是中华烤鱼文化的发源地,古法技艺味美鲜香、享誉全国;有“国家历史文化名镇”-宁厂古镇,宝源山天赐
+          盐泉亘古不竭,古法制盐技艺传承千年;有神秘悠远的盐马古栈道,有雄险奇秀的云台峰,有堪称世界之谜的荆竹坝西汉岩棺群,有三峡库区唯一未
+          淹没的古县城大宁古城.……..巫溪,是探索人类历史文明密码的宝库。
+        </p>
+        <img src="./img/detail-ljwx.png" alt="">
+      </div>
+      <div class="tab-content" v-if="tabIndex == 2">
+        <div class="title">三峡库区的“生态明珠”</div>
+        <p>
+          巫溪，是三峡库区的“生态明珠”。境内山清水秀、资源富集,有“重庆第一高峰”阴条岭“亚洲第一深谷”兰英大峡谷、“天下第一溪’大宁河,
+          有全市唯一一条I类水质河流-后溪河,有被誉为“大宁河七峡之冠”的妙峡,更有“南国第一高山草甸”-红池坝,是重庆市第一森林资源大县、
+          森林覆盖率达70.2%,是旅游观光、休闲度假的一方圣地。境内立体气候独特、农特产品绿色。有重庆市唯一中欧互认免检农产品-“巫溪洋芋”
+          有大西南地区面积最大的野生老鹰茶生长地是“中国老鹰茶之乡”;有历经千年传承品味正宗的“巫溪烤鱼”,是“国际烤鱼之乡”;有享誉全国的
+          太白贝母、大宁党参、巫溪独活等优质药材,是“中国道地药材之乡”。
+        </p>
+        <img src="./img/detail-ljwx.png" alt="">
+      </div>
+      <div class="tab-content" v-if="tabIndex == 3">
+        <div class="title">老鹰茶名字的由来</div>
+        <p>
+          传说在上古时期,神农氏到深山收罗草药,吃了一种草后不幸中毒,正值生命垂危之际,突然一只受伤的老鹰飞到树上,在啄食了几片树叶后便缓解了伤势。
+          神农氏看到之后也学着老鹰拾起几片清香缕缕的树叶,放入口中嚼而食之,顿觉神清气爽,诸毒豁然而解神农氏也不知此神树为何种树木,因与老鹰相遇而
+          发现就将其命名为“老鹰树”百姓常采叶煮饮之,最终成为了家喻户晓、流传千古的“老鹰茶”。的树叶,放入口中嚼而食之,顿觉神清气爽,诸毒豁然而解。
+          神农氏也不知此神树为何种树木,因与老鹰相遇而发现就将其命名为“老鹰树”,百姓常采叶煮饮之,最终成为了家喻户晓、流传千古的“老鹰茶”。
+        </p>
+        <img src="./img/detail-ljwx.png" alt="">
+      </div>
+      <div class="tab-content" v-if="tabIndex == 4">
+        <div class="title">巫溪老鹰茶历史悠久</div>
+        <p>
+          老鹰茶在我国发展历史悠久,最早可追溯至春秋战国时代,唐朝时期曾为贡茶,宋朝时期已作为茶马互市、博马贸易的主要商品,
+          明朝时期被收录于《本草纲目》之中。此外《万县乡土志》中也曾对老鹰茶有过记载和描述(当时巫溪县属于万县市管理)。
+        </p>
+        <p>
+          巫溪老鹰茶发展基本上与“巫盐文化”同时期产生。古代巫溪盐业发达,但山高路陡,食盐运输全靠人背马驮,运输期间只能自
+          备茶水老鹰茶因长时间不变味,成为了盐夫、商旅之人的必备饮用茶。几百年来,老鹰茶作为巫溪群众的日常饮品,在生产生
+          活中具有重要地位直至今日,巫溪民间将老鹰茶称为“盐背子茶”、“药王茶”还仍然保留着夏日饮用老鹰茶解渴、日常以老
+          鹰茶泡饭等生活习惯。
+        </p>
+        <img src="./img/detail-ljwx.png" alt="">
+      </div>
+      <div class="tab-content" v-if="tabIndex == 5">
+        <div class="title">品质优良 品牌响亮</div>
+        <p>
+          根据浙江省茶叶学会出具的《巫溪老鹰茶科学技术成果评价报告》表明,巫溪老鹰茶具有三个明显的成分特性:①老鹰茶属樟科植物不含咖啡碱,不会兴奋神经,
+          还能促进和提高睡眠质量。②老鹰茶富含黄酮类物质,远高于其他茶类,具有抗衰老氧化、降血糖血脂、保肝免疫等多种功效。③老鹰茶富含芳香油,具有除臭
+          祛味、抗炎降火的特殊功效。
+        </p>
+        <p>
+          按照家军书记调研巫溪后关于将“巫溪老鹰茶”作为“一县一品”重庆爆品打造的部署要求,巫溪县委、县政府已明确将“巫溪老鹰茶”列入全县“一主两辅”
+          特色产业进行重点打造到2030年,全县老鹰茶种植规模将达20万亩，年总产量达1万吨,年综合产值达50亿元,巫溪老鹰茶将成为具有“重庆辨识度、
+          国际影响力的爆品,领跑茶叶产业“新赛道”
+        </p>
+        <img src="./img/detail-ljwx.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'AppDetail',
+  label: '了解巫溪',
+
+  props: {
+    instance: Function,
+    dict: Object,
+    menuName: {default: "了解巫溪"}
+  },
+
+  data() {
+    return {
+      tabList: ['了解巫溪', '巫巴文化', '生态明珠', '老鹰茶由来', '老鹰茶历史', '品质与品牌'],
+      tabIndex: 0
+    }
+  },
+
+  mounted() {
+  },
+
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss">
+.AppDetail {
+  height: 100%;
+  width: 100%;
+  background-image: url("./img/detail-bg.png");
+  background-size: 100% 100%;
+  padding-top: 16px;
+  .top-title {
+    font-family: PingFangSC-SNaNpxibold;
+    font-weight: 600;
+    font-size: 17px;
+    line-height: 24px;
+    color: #FFF;
+    letter-spacing: 0;
+    text-align: center;
+    padding-top: 10px;
+    text-align: center;
+    margin-bottom: 26px;
+  }
+  .home-content {
+    height: calc(100% - 158px);
+    width: calc(100% - 32px);
+    margin: 0 16px;
+    background: #FFF;
+    border-radius: 12px;
+    .tab-content {
+      padding: 0 16px;
+      .title {
+        line-height: 30px;
+        font-family: PingFangSC-SNaNpxibold;
+        font-weight: 600;
+        font-size: 22px;
+        color: #222;
+        text-align: center;
+        padding: 20px 0 18px 0;
+      }
+      p {
+        width: 100%;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 15px;
+        color: #222;
+        text-align: justify;
+        line-height: 26px;
+        word-break: break-all;
+        text-indent: 2em;
+        margin-bottom: 16px;
+      }
+      img {
+        width: 100%;
+        height: 254px;
+        margin-bottom: 16px;
+      }
+    }
+    .tab {
+      position: fixed;
+      top: 500px;
+      left: 0;
+      padding: 8px;
+      background: rgba($color: #fff, $alpha: 0.4);
+      border-radius: 4px;
+      .item {
+        width: 88px;
+        line-height: 34px;
+        color: #666;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 14px;
+        text-align: center;
+      }
+      .active {
+        background: #FFF;
+        border-radius: 4px;
+        color: #F5510A;
+      }
+    }
+  }
+}
+</style>