三

mh-two-thousand-and-two

2024-04-03 29a02350b873fa6339a7535fa929697fec9a8f84

 pages/interchannel/interchannel.vue

@@ -1,24 +1,17 @@
<template>
   <view class="bag ">
      <view class="NavTop flex">
         <view class=""><img src="../../static/中医人物知识库0201/三条杠.png" alt="" /></view>
         <view class="">历代学术流派</view>
         <view class="NavTopr">
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
            <img src="../../static/中医人物知识库0201/三条杠.png" alt="" />
         </view>
      </view>
   <!-- 顶部导航 -->
   <headNav  :idIndex="idIndex" text="历代学术流派"/>
      <view class="Midde flex">
         <view class="MiddeBack">返回</view>
         <!-- <view class="MiddeBack">返回</view> -->
         <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
         <view class="flex flex-center flex-column">
            <view class="" style="font-weight: 900;margin-bottom:20rpx ;">河间图谱</view>
            <view class="" style="font-weight: 900;margin-bottom:.2rem ;font-size: .26rem;line-height: 1;">河间图谱
            </view>
            <ul class="flex Lists">
               <li v-for="item in secretary "
                  :style="{background:item.istrue?'#5879a4':'#e5ecf4',color:item.istrue?'#fff':'#889fbd'}"
                  class="flex" @click="ListClick(item.id)">
                  {{item.name}}
               </li>
               <li style="background-color: #597AA5;color: #fff;">学派介绍</li>
               <!-- /pages/AcademicHistory/AcademicHistory -->
               <li @click="ListClick" style="background-color: #fff;color: #597AA5;" >学派图谱</li>
            </ul>
         </view>
         <view class=""></view>
@@ -37,18 +30,19 @@
                  <li>学术特点:-</li>
                  <li>来源:任应秋，中医各家学说|M).上海:上海科学技术出版社，1986</li>
               </ul>
            </view> 
            </view>
         </view>
         <view class="Bottom_Bot" style="color: #d1d1d1   ;">
            <view class="">
               <!-- <csr-tab :tabList="tabList" :value="0"></csr-tab> -->
               <csr-tab :value.sync="swiperIndex" :tabList="tabSwiperList"></csr-tab>
               <view class="flex flex-center csrTab1">
                  <csr-tab class="csrTab" :value.sync="swiperIndex" :tabList="tabSwiperList"></csr-tab>
               </view>
               <swiper :current="swiperIndex" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)"
                  indicator-active-color="rgba(255,255,255,0)" class="Swiper">
                  <!-- @change="swiperChange" -->
                  <swiper-item  v-for="(swiper,index) in tabSwiperList" :key="index">
                     <view class="swiperList"
                        style="background-color: #FFFFFF;text-align: left;color: #000;">
                  <swiper-item v-for="(swiper,index) in tabSwiperList" :key="index">
                     <view class="swiperList" style="background-color: #FFFFFF;text-align: left;color: #000;">
                        {{swiper.content}}
                     </view>
                  </swiper-item>
@@ -65,6 +59,8 @@
   export default {
      data() {
         return {
            // 标题顶部栏需要的东西
            idIndex:0,
            swiperIndex: 0,
            tabSwiperList: [{
               TabControl: `标题1`,
@@ -90,14 +86,6 @@
               id: 2,
               name: '幅度s萨芬',
               istrue: false
            }, {
               id: 3,
               name: '幅度s萨芬',
               istrue: false
            }, {
               id: 4,
               name: '幅度s萨芬',
               istrue: false
            }],
            tabList: [{
               name: '士大夫',
@@ -108,9 +96,22 @@
            }, ]
         }
      },
      methods: {
      onLoad(options) {
         this.idIndex = options.id
         console.log('optionsoptionsoptions',options.id);
      },
      methods: { // 返回上一页
         goBack() {
            // uuni.redirectTo();
            uni.redirectTo({
               url: '/pages/index/index'
            })
         },
         ListClick(event) {
            console.log(event);
            uni.navigateTo({
               url: '/pages/AcademicHistory/AcademicHistory?id='+this.idIndex
            })
            this.secretary.forEach(item => {
               if (item.id === event) {
                  item.istrue = true;
@@ -128,6 +129,9 @@
</script>

<style scoped>
   * {
      box-sizing: border-box;
   }

   view {
      color: #fff;
@@ -156,39 +160,69 @@
   }

   .Midde {
      background-color: #d1d6dc;
      /* background-color: #d1d6dc; */
      background-image: url(@/static/image/学派Bg.png);
      background-size: 100% 100%;
      color: #000;
      padding: 40rpx;
      padding: .18rem .23rem 0;
      align-items: flex-start;
      height: 1.43rem;

      view {

         color: #000;
      }

      .MiddeBack {
         width: 0.6rem;
         height: 0.24rem;
         font-size: .12rem;
         padding: 0;

      }

      .Lists {
         li {
            background-color: #e4ebf3;
            /* background-color: #e4ebf3;
            border: 1rpx solid #5778a2;
            padding: 5rpx 10rpx;
            font-size: 18rpx;
            font-size: 18rpx; */
            width: 0.96rem;
            height: .3rem;
            border: 1px solid #597AA5;
            line-height: .3rem;
            text-align: center;
            font-size: .14rem;
         }
      }
   }

   .Bottom {
      padding: 40rpx;
      padding: .39rem 1.21rem !important;

      .Bottom_top {
         justify-content: flex-start;
         align-items: flex-end;
         /* align-items: flex-end; */
         align-items: flex-start;
         padding: 0 1.59rem;

         .BBimage {
            width: 4.05rem;
            height: 1.93rem;
            margin-right: .49rem;
         }

         .author {
            color: #000;
            padding-left: 100rpx;
            /* padding-left: 100rpx; */

            li {
               padding: 5rpx 0;
               /* padding: 5rpx 0;
                */
               line-height: .22rem;
               font-size: .14rem;
               margin-top: .05rem;
               color: #2C2C2C;
            }
         }
      }
@@ -207,10 +241,63 @@

   }

   .Swiper {}
   .Bottom_Bot {
      margin-top: .39rem;
   }

   .csrTab1 {
      border-bottom: 2px solid #9E9E9E;
      margin-bottom: .3rem;
   }

   .csrTab {
      width: 40%;
      height: .4rem;
      /* line-height: .3rem; */
      font-size: .14rem;
      display: flex;

   }

   .Swiper {
      padding: 0 1.25rem;
      height: 2rem;

   }

   .csrTab ::v-deep .uni-tab-bar {
      border: 0 !important;
      height: .02rem;
      background-color:#597AA5;
   }

   .csrTab ::v-deep .uni-tab-item {
      color: #9E9E9E !important;
      font-weight: 700;
      height: .4rem;
   }

   .csrTab ::v-deep .uni-tab-active {
      color: #597AA5 !important;
   }

   .swiperList {
      /* flex: 1; */
      /* min-height: 500rpx; */
      line-height: .28rem;
      font-size: .14rem;
      color: #2C2C2C;
   }
@media screen and (min-width:2560px)and (max-width:3840px){
   /* .csrTab ::v-deep .uni-tab-bar {
      border: 0.015rem solid #597AA5 !important;
   } */
}
	
   @media screen and (min-width:1366px) and (max-width:1920px){
   /*    .csrTab ::v-deep .uni-tab-bar {
         border: 0 !important;
         height: .02rem;
         background-color:#597AA5;
			
      } */
   }
</style>