dvcp_v2_wxcp_app/src/project/wuxi/AppMeeting/AppAgenda.vue

<template>
  <div class="AppAgenda">
    <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="home-content">
      <div class="tab-content" v-if="tabIndex == 0">
        <p class="time">19：20 — 19：30 </p>
        <p class="text">暖场及观看宣传片</p>

        <p class="title">第一篇章：<span>迎盛会｜老鹰茶韵飘万里·文化传承谱新篇</span></p>
        <p class="time">19：30 — 19：33</p>
        <p class="text">巫溪县人民政府县长王中同志致欢迎辞</p>

        <p class="time">19：33 — 19：36</p>
        <p class="text">为中国经济林协会为巫溪县老鹰茶协会、重庆市老鹰茶检测研发中心揭牌</p>

        <p class="time">19：36 — 19：38</p>
        <p class="text">发布巫溪老鹰茶团体标准（老鹰茶种苗技术规程、巫溪老鹰茶加工技术规范、林木良种证），以及重庆市食品安全地方标准</p>

        <p class="time">19：38 — 19：40</p>
        <p class="text">颁发老鹰茶有机认证证书</p>

        <p class="time">19：40 — 19：45</p>
        <p class="text">发布巫溪老鹰茶VI视觉体系、老鹰茶特色产区、巫溪老鹰茶“茶王”“茶后”</p>

        <p class="time">19：45 — 19：50</p>  
        <p class="text">发放聘书</p>

        <p class="time">19：50 — 19：58</p>  
        <p class="text">招商签约仪式</p>

        <p class="time">19：58 — 20：04</p>  
        <p class="text">老鹰茶封藏仪</p>

        <p class="time">20：04 — 20：07</p>  
        <p class="text">中国老鹰茶之2024巫溪老鹰茶文旅消费节启动仪式</p>

        <p class="title">第二篇章：溯茶源｜巫咸古韵舞翩跹·老鹰茶歌传四方</p>
        <p class="time">20：10 — 21：10 </p>
        <p class="text">（1）节目一：序--音乐剧《巫溪欢迎你》</p>
        <p class="text">（2）节目二：情景颂唱《老鹰茶赋》</p>
        <p class="text">（3）节日三：歌伴舞《敬你一杯老鹰茶》</p>
        <p class="text">（4）节目四：情景男子群舞《盐之灵》</p>
        <p class="text">（5）节目五：情景歌舞剧《巫溪茶姑》</p>

        <p class="text">①篇章《采茶舞》</p>
        <p class="text">②篇章《制茶舞》；</p>
        <p class="text">③篇章《献茶舞》</p>
        <p class="text">（6）节目六：情景歌舞《金色老鹰茶》</p>
        <p class="text">（7）节目七：流行说唱《家乡美如画》</p>
        <p class="text">（8）节目八：融合剧《天地灵气》</p>
        <p class="text">（9）节目九：大型情景融合剧《梦逍遥》</p>
      </div>
      <div class="tab-content" v-if="tabIndex == 1">
        <p class="time">9：35 — 9：40 </p>
        <p class="text">重庆市巫溪县政府副县长：<span>陈钢</span></p>

        <p class="time">9：40 — 10：00 </p>
        <p class="text">中国工程院院士刘仲华院士：<span>祝福视频</span></p>

        <p class="title">第一篇章：代用之茶——巫溪老鹰茶</p>
        <p class="time">10：05 — 10：20 </p>
        <p class="text">中国茶叶学会理事，西南大学涪陵研究院院长曾亮议题：<span>老鹰茶的物质基础组成和功效评价</span></p>

        <p class="time">10：20 — 10：35</p>
        <p class="text">林草种质资源创新利用所副所长戴前莉议题：<span>巫溪老鹰茶资源禀赋铸就产业先发展</span></p>

        <p class="title">第二篇章：健康之茶——巫溪老鹰茶</p>
        <p class="time">10：35 — 10：50</p>
        <p class="text">中国农业科学院茶叶研究所所长、茶业经济与文化研究创新团队首席科学家，中国茶叶学会理事长姜仁华议题：<span>科技赋能老鹰茶产品健康功效</span></p>

        <p class="time">10：50 — 11：05</p>
        <p class="text">中华全国供销合作总社杭州茶叶研究所党委委员谭蓉议题：<span>不同加工工艺对老鹰茶风味品质的影响研究</span></p>

        <p class="time">11：05 — 11：20</p>
        <p class="text">重庆中医药学院中药学院副院长曹纬国副院长<br/>议题：<span>老鹰茶食用价值研究</span></p>

        <p class="title">第三篇章：爆品之茶——巫溪老鹰茶</p>
        <p class="time">11：20 — 11：35</p>
        <p class="text">宁饮川老鹰茶公司运营总监周泓妤议题：<span>巫溪老鹰茶发展历程与品牌发展</span></p>

        <p class="time">11：35 — 11：50</p>
        <p class="text">金蒲莲老鹰茶公司负责人黎军议题：<span>巫溪老鹰茶品牌营销—金蒲莲的“拓圈”之路</span></p>

        <p class="time">11：50 — 12：05</p>
        <p class="text">深圳市华巨臣国际会展集团三茶创新研究院项目负责人&企划中心品牌副经理孙逸超议题：<span>平台赋能：巫溪老鹰茶品牌塑造与产业崛起之道</span></p>

        <p class="time">12：05 — 12：20</p>
        <p class="text">小罐茶联合创始人于进江议题：<span>鹰姿飒爽！打造百亿老鹰茶区域品牌</span></p>

        <p class="time">12：20 — 12：30</p>
        <p class="text">会议结束</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'AppAgenda',
  appName: '活动议程',

  data() {
    return {
      tabList: ['4月23日', '4月24日'],
      tabIndex: 0
    }
  },
  mounted() {
    document.title = '活动议程'
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
uni-page-body{
  height: 100%;
}
.AppAgenda {
  min-height: 100%;
  width: 100%;
  background-image: url("./img/detail-bg.png");
  background-size: 100% 100%;
  padding: 32px 0 128px 0;
  overflow: auto;
  box-sizing: border-box;
  .home-content {
    min-height: calc(100% - 316px);
    width: calc(100% - 64px);
    margin: 0 32px;
    padding: 48px 32px 28px;
    background: #FFF;
    border-radius: 24px;
    box-sizing: border-box;
    .title {
      line-height: 44px;
      font-family: PingFangSC-SNaNpxibold;
      font-weight: 600;
      font-size: 32px;
      color: #F5510A;
      margin: 8px 0 0 4px;
    }
    .time {
      line-height: 44px;
      font-family: PingFangSC-SNaNpxibold;
      font-weight: 600;
      font-size: 32px;
      color: #999;
      margin-bottom: 4px;
    }
    .text {
      color: #222;
      font-size: 28px;
      font-family: PingFangSC;
      font-weight: 600;
      line-height: 48px;
      margin-bottom: 24px;
      span {
        display: inline-block;
        font-weight: 400;
      }
    }

  }
  .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;
    }
  }
}
</style>