<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-wbwh.png" alt="">
      </div>
      <div class="tab-content" v-if="tabIndex == 2">
        <div class="title">三峡库区的“生态明珠”</div>
        <p>
          巫溪，是三峡库区的“生态明珠”。境内山清水秀、资源富集,有“重庆第一高峰”阴条岭“亚洲第一深谷”兰英大峡谷、“天下第一溪’大宁河,
          有全市唯一一条I类水质河流-后溪河,有被誉为“大宁河七峡之冠”的妙峡,更有“南国第一高山草甸”-红池坝,是重庆市第一森林资源大县、
          森林覆盖率达70.2%,是旅游观光、休闲度假的一方圣地。境内立体气候独特、农特产品绿色。有重庆市唯一中欧互认免检农产品-“巫溪洋芋”
          有大西南地区面积最大的野生老鹰茶生长地是“中国老鹰茶之乡”;有历经千年传承品味正宗的“巫溪烤鱼”,是“国际烤鱼之乡”;有享誉全国的
          太白贝母、大宁党参、巫溪独活等优质药材,是“中国道地药材之乡”。
        </p>
        <img src="./img/detail-stmz.png" alt="">
      </div>
      <div class="tab-content" v-if="tabIndex == 3">
        <div class="title">老鹰茶名字的由来</div>
        <p>
          传说在上古时期,神农氏到深山收罗草药,吃了一种草后不幸中毒,正值生命垂危之际,突然一只受伤的老鹰飞到树上,在啄食了几片树叶后便缓解了伤势。
          神农氏看到之后也学着老鹰拾起几片清香缕缕的树叶,放入口中嚼而食之,顿觉神清气爽,诸毒豁然而解神农氏也不知此神树为何种树木,因与老鹰相遇而
          发现就将其命名为“老鹰树”百姓常采叶煮饮之,最终成为了家喻户晓、流传千古的“老鹰茶”。的树叶,放入口中嚼而食之,顿觉神清气爽,诸毒豁然而解。
          神农氏也不知此神树为何种树木,因与老鹰相遇而发现就将其命名为“老鹰树”,百姓常采叶煮饮之,最终成为了家喻户晓、流传千古的“老鹰茶”。
        </p>
        <img src="./img/detail-lycyl.png" alt="">
      </div>
      <div class="tab-content" v-if="tabIndex == 4">
        <div class="title">巫溪老鹰茶历史悠久</div>
        <p>
          老鹰茶在我国发展历史悠久,最早可追溯至春秋战国时代,唐朝时期曾为贡茶,宋朝时期已作为茶马互市、博马贸易的主要商品,
          明朝时期被收录于《本草纲目》之中。此外《万县乡土志》中也曾对老鹰茶有过记载和描述(当时巫溪县属于万县市管理)。
        </p>
        <p>
          巫溪老鹰茶发展基本上与“巫盐文化”同时期产生。古代巫溪盐业发达,但山高路陡,食盐运输全靠人背马驮,运输期间只能自
          备茶水老鹰茶因长时间不变味,成为了盐夫、商旅之人的必备饮用茶。几百年来,老鹰茶作为巫溪群众的日常饮品,在生产生
          活中具有重要地位直至今日,巫溪民间将老鹰茶称为“盐背子茶”、“药王茶”还仍然保留着夏日饮用老鹰茶解渴、日常以老
          鹰茶泡饭等生活习惯。
        </p>
        <img src="./img/detail-lycls.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-pzypp.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'AppDetail',
  appName: '了解巫溪',

  data() {
    return {
      tabList: ['了解巫溪', '巫巴文化', '生态明珠', '老鹰茶由来', '老鹰茶历史', '品质与品牌'],
      tabIndex: 0
    }
  },

  mounted() {
    document.title = '了解巫溪'
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
uni-page-body{
  height: 100%;
}
.AppDetail {
  min-height: 100%;
  width: 100%;
  background-image: url("./img/detail-bg.png");
  background-size: 100% 100%;
  padding: 32px 0 64px 0;
  box-sizing: border-box;
  .top-title {
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 34px;
    line-height: 48px;
    color: #FFF;
    letter-spacing: 0;
    text-align: center;
    padding-top: 20px;
    text-align: center;
    margin-bottom: 52px;
  }
  .home-content {
    height: calc(100% - 316px);
    width: calc(100% - 64px);
    margin: 0 32px;
    background: #FFF;
    border-radius: 24px;
    .tab-content {
      padding: 0 32px;
      .title {
        line-height: 60px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 44px;
        color: #222;
        text-align: center;
        padding: 40px 0 36px 0;
      }
      p {
        width: 100%;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 30px;
        color: #222;
        text-align: justify;
        line-height: 52px;
        word-break: break-all;
        text-indent: 2em;
        margin-bottom: 32px;
      }
      img {
        width: 100%;
        height: 508px;
        margin-bottom: 32px;
      }
    }
    .tab {
      position: fixed;
      top: 752px;
      left: 0;
      padding: 16px;
      background-color: #F9F9F9;
      border-radius: 8px;
      z-index: 999;
      .item {
        width: 176px;
        line-height: 68px;
        color: #666;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 28px;
        text-align: center;
      }
      .active {
        background: #FFF;
        border-radius: 8px;
        color: #F5510A;
        box-shadow: 0 0 4px 0 #962a032e;
      }
    }
  }
}
</style>
