首页的视频模块完成

src/pages/carVideo/components/branchOne.vue

@@ -1,75 +1,99 @@
 <template>
-	<loading v-if="loading"></loading>
-	<view v-else class="branch-one">
-		<view class="sidebar-box">
-			<van-sidebar custom-class='van-sidebar' :active-key="activeKey" @change='sidebarOnChange'>
-				<van-sidebar-item :title="item.chapterName" v-for="(item,index) in carVideoList" :key='index' />
-			</van-sidebar>
-			<view class="video-box">
-				<view v-if="currentList.length===0">
-					暂无视频
-				</view>
-				<m-video-leftright v-else :carVideoItem='item' v-for="(item,index) in currentList" :key='index'>
-				</m-video-leftright>
-			</view>
-		</view>
-	</view>
+  <loading v-if="loading"></loading>
+  <view v-else class="branch-one">
+    <view class="sidebar-box">
+      <van-sidebar
+        custom-class="van-sidebar"
+        :active-key="activeKey"
+        @change="sidebarOnChange"
+      >
+        <van-sidebar-item
+          style="width: 240rpx"
+          @selected="changeSideBar"
+          :active-key="activeKey"
+          :title="item.chapterName"
+          v-for="(item, index) in carVideoList"
+          :key="index"
+          :item-key="index"
+        />
+      </van-sidebar>
+      <view class="video-box">
+        <view v-if="currentList.length === 0"> 暂无视频 </view>
+        <m-video-leftright
+          v-else
+          :carVideoItem="item"
+          v-for="(item, index) in currentList"
+          :key="index"
+        >
+        </m-video-leftright>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		props:{
-			carVideoList: {
-				type: Array
-			}
-		},
-		data: () => ({
-			bannerList: [],
-			loading: true,
-			activeKey: 0,
-			currentList:[]
-		}),
-		methods: {
-			async sidebarOnChange(e) {
-				this.activeKey = e.detail
-				console.log(e.detail,this.carVideoList)
-				const {data} = await this.$api.carVideo.getCarVideoList(this.carVideoList[this.activeKey].id)
-				this.currentList=data
-			}
-		},
-		async mounted() {
-			// let {
-			// 	data: bannerListData
-			// } = await this.$api.home.getHomePageDataList(['carouselChart'])
-			this.sidebarOnChange({detail:this.activeKey})
-			// this.bannerList = bannerListData.carouselChart
-			this.$nextTick(() => {
-				this.loading = false
-			})
-		}
-	}
+export default {
+  props: {
+    carVideoList: {
+      type: Array,
+    },
+  },
+  data: () => ({
+    bannerList: [],
+    loading: true,
+    activeKey: 0,
+    currentList: [],
+  }),
+  methods: {
+    async sidebarOnChange(e) {
+      this.activeKey = e.detail;
+      console.log(e.detail, this.carVideoList);
+      const { data } = await this.$api.carVideo.getCarVideoList(
+        this.carVideoList[this.activeKey].id
+      );
+      this.currentList = data;
+    },
+    async changeSideBar(itemKey) {
+      this.activeKey = itemKey;
+      const { data } = await this.$api.carVideo.getCarVideoList(
+        this.carVideoList[this.activeKey].id
+      );
+      this.currentList = data;
+    },
+  },
+  async mounted() {
+    // let {
+    // 	data: bannerListData
+    // } = await this.$api.home.getHomePageDataList(['carouselChart'])
+    this.sidebarOnChange({ detail: this.activeKey });
+    // this.bannerList = bannerListData.carouselChart
+    this.$nextTick(() => {
+      this.loading = false;
+    });
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.sidebar-box {
-		display: flex;
-		background-color: #FFFFFF;
-		height: calc(100vh - 130px);
-		overflow: auto;
+.sidebar-box {
+  display: flex;
+  background-color: #ffffff;
+  overflow: auto;
 
-		/deep/ .van-sidebar {
-			width: 220rpx;
-			height: 100%;
-			overflow-y: auto;
-			font-size: 26rpx;
-			font-weight: 400;
-			line-height: 39rpx;
-			color: #0F0404;
-		}
+  /deep/ .van-sidebar {
+    width: 220rpx;
+    height: 100%;
+    overflow-y: auto;
+    font-size: 26rpx;
+    font-weight: 400;
+    line-height: 39rpx;
+    color: #0f0404;
+  }
 
-		.video-box {
-			height: 100%;
-			overflow-y: auto;
-		}
-	}
+  .video-box {
+    height: 100%;
+    max-height: 100vh;
+    overflow-y: scroll;
+  }
+}
 </style>