config home page section width

src/views/dynamic/index.vue

@@ -2,49 +2,58 @@
   <div class="dynamic">
     <div class="d-con">
       <div class="aside">
-      <mSidebar :activeId="String(activeId)" :list="list" @handleItem="handleItem" class="m-sidebar">
-        <div slot="bottom" class="search-cls">
-          <input type="text" placeholder="在此搜索" @keyup.enter="getCollection" v-model="keyword" />
-          <div @click="getCollection" class="search-btn primary">
-            <img :src="require('@/assets/images/search.png')" alt />
+        <mSidebar
+          :activeId="String(activeId)"
+          :list="list"
+          @handleItem="handleItem"
+          class="m-sidebar"
+        >
+          <div slot="bottom" class="search-cls">
+            <input
+              type="text"
+              placeholder="在此搜索"
+              @keyup.enter="getCollection"
+              v-model="keyword"
+            />
+            <div @click="getCollection" class="search-btn primary">
+              <img :src="require('@/assets/images/search.png')" alt />
+            </div>
           </div>
-        </div>
-      </mSidebar>
-    </div>
-    <div class="d-body">
-      <video autoplay controls :src="activeItem.video"></video>
-      <div class="d-desc">
-        <div class="desc-l">
-          <p>红军税务后人采访</p>
-          <div class="l-btom">
-            <div>
-              <span>标签</span>
-              <span>标签</span>
+        </mSidebar>
+      </div>
+      <div class="d-body">
+        <video autoplay controls :src="activeItem.video"></video>
+        <div class="d-desc">
+          <div class="desc-l">
+            <p>红军税务后人采访</p>
+            <div class="l-btom">
+              <div>
+                <span>标签</span>
+                <span>标签</span>
+              </div>
+              <div>片长：3：27</div>
             </div>
-            <div>片长：3：27</div>
           </div>
-        </div>
-        <div class="desc-r">
-          <div>视频介绍：</div>
-          <p>视频介绍视频介绍视频介绍视频介绍</p>
+          <div class="desc-r">
+            <div>视频介绍：</div>
+            <p>视频介绍视频介绍视频介绍视频介绍</p>
+          </div>
         </div>
       </div>
     </div>
-    </div>
   </div>
 </template>
 
 <script>
-import mSidebar from '@/components/Sidebar'
-
-const list = []
+import mSidebar from "@/components/Sidebar";
 
+const list = [];
 
 export default {
-  components:{
+  components: {
     mSidebar,
   },
-  data(){
+  data() {
     const data = {
       pageNum: 1,
       pageSize: 10,
@@ -53,7 +62,8 @@ export default {
       size: 5,
       startRow: 1,
       total: 5,
-      list:[{
+      list: [
+        {
           content: "<p>川陕苏区税收大事记</p>",
           createTime: "2020-08-06 15:02:16",
           display: 0,
@@ -63,10 +73,11 @@ export default {
           status: 1,
           submitId: 8,
           submitName: "admin",
-          video: this.$cdn + '/video/testVideo.mp4',
+          video: this.$cdn + "/video/testVideo.mp4",
           title: "川陕苏区税收大事记1",
-          updateTime: "2020-08-06 15:58:02"
-      },{
+          updateTime: "2020-08-06 15:58:02",
+        },
+        {
           content: "<p>川陕苏区税收大事记</p>",
           createTime: "2020-08-06 15:02:16",
           display: 0,
@@ -74,154 +85,158 @@ export default {
           img: "http://192.168.0.44:8101/data/media/20200806_150209699.jpg",
           reason: "",
           status: 1,
-          video:'https://4dscene.4dage.com/new4dkk/course/videos/img_guide01@2x.mp4',
+          video:
+            "https://4dscene.4dage.com/new4dkk/course/videos/img_guide01@2x.mp4",
           submitId: 8,
           submitName: "admin",
           title: "川陕苏区税收大事记2",
-          updateTime: "2020-08-06 15:58:02"
-      }]
-    }
+          updateTime: "2020-08-06 15:58:02",
+        },
+      ],
+    };
     return {
       data,
+      keyword: "",
       activeId: this.$route.query.id,
-      activeItem:'',
-      list
-    }
+      activeItem: "",
+      list,
+    };
   },
-  mounted(){
-    this.getNews()
+  mounted() {
+    this.getNews();
   },
-  watch:{
-    activeId(newVal){
-       this.list.forEach(item=>{
+  watch: {
+    activeId(newVal) {
+      this.list.forEach((item) => {
         if (item.id == newVal) {
-          this.activeItem = item
+          this.activeItem = item;
         }
-      })
-    }
-  },
-  methods:{
-    getCollection(){
-
+      });
     },
-    handleItem(item){
-      this.activeId = item.id
+  },
+  methods: {
+    getCollection() {},
+    handleItem(item) {
+      this.activeId = item.id;
     },
-    pageChange (data) {
-      this.currentPage = data
+    pageChange(data) {
+      this.currentPage = data;
     },
-    async getNews(){
-      let result = this.data
+    async getNews() {
+      let result = this.data;
 
-      this.list = result.list
-      this.list.forEach(item=>{
+      this.list = result.list;
+      this.list.forEach((item) => {
         if (item.id == this.activeId) {
-          this.activeItem = item
+          this.activeItem = item;
         }
-      })
+      });
       if (!this.activeItem) {
-        this.activeItem = this.list[0]
-        this.activeId = this.list[0].id
+        this.activeItem = this.list[0];
+        this.activeId = this.list[0].id;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.dynamic{
-  background: #F1F1F1;
+@import "../../assets/style/globalVars.less";
+.dynamic {
+  background: #f1f1f1;
   width: 100%;
-  .d-con{
-    max-width: 55rem;
+  .d-con {
+    width: 55rem;
+    // width: @containerW;
+    margin: 0 auto;
     margin: 3.25rem auto 0;
     position: relative;
     padding: 3.33rem 0;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-  .aside{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 1.67rem;
-    width: 14.17rem;
-    flex-shrink: 0;
-    .m-sidebar{
-    }
-    
-    .search-cls{
-      width: 10.42rem;
-      margin: .83rem auto;
-      background: #fff;
-      input{
-        width: 80%;
+    .aside {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 1.67rem;
+      width: 14.17rem;
+      flex-shrink: 0;
+      .m-sidebar {
       }
-    }
-    .paging{
-      margin-top: .83rem;
-    }
-  }
-  .d-body{
-    flex: 4;
-    margin-left: 3.33rem;
-    text-align: center;
-    padding-bottom: 1.67rem;
-    background: #fff;
-    .info{
-      color: #9e9e9e;
-      margin: 1.25rem 0;
-      >span{
-        margin-right: 1.25rem;
+
+      .search-cls {
+        width: 10.42rem;
+        margin: 0.83rem auto;
+        background: #fff;
+        input {
+          width: 80%;
+        }
+      }
+      .paging {
+        margin-top: 0.83rem;
       }
     }
-    >video{
-      width: 100%;
-    }
-    .d-desc{
-      display: flex;
-      justify-content: space-around;
-      align-items: flex-start;
-      width: 90%;
-      margin: .83rem auto 0;
-      .desc-l{
-        flex: 1;
-        text-align: left;
-        >p{
-          font-weight: bold;
-          font-weight: 1.25rem;
+    .d-body {
+      flex: 4;
+      margin-left: 3.33rem;
+      text-align: center;
+      padding-bottom: 1.67rem;
+      background: #fff;
+      .info {
+        color: #9e9e9e;
+        margin: 1.25rem 0;
+        > span {
+          margin-right: 1.25rem;
         }
-        .l-btom{
-          display: flex;
-          margin-top: .42rem;
-          >div{
-            >span{
-              border: .04rem solid #DF3B2F;
-              display: inline-block;
-              border-radius: .88rem;
-              min-width: 3.33rem;
-              font-size: .83rem;
-              text-align: center;
-              color: #DF3B2F;
-              margin-right: .83rem;
-            }
-            &:last-of-type{
-              border-left: .04rem solid #000;
-              padding-left: .83rem;
+      }
+      > video {
+        width: 100%;
+      }
+      .d-desc {
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-start;
+        width: 90%;
+        margin: 0.83rem auto 0;
+        .desc-l {
+          flex: 1;
+          text-align: left;
+          > p {
+            font-weight: bold;
+            font-weight: 1.25rem;
+          }
+          .l-btom {
+            display: flex;
+            margin-top: 0.42rem;
+            > div {
+              > span {
+                border: 0.04rem solid #df3b2f;
+                display: inline-block;
+                border-radius: 0.88rem;
+                min-width: 3.33rem;
+                font-size: 0.83rem;
+                text-align: center;
+                color: #df3b2f;
+                margin-right: 0.83rem;
+              }
+              &:last-of-type {
+                border-left: 0.04rem solid #000;
+                padding-left: 0.83rem;
+              }
             }
           }
         }
-      }
-      .desc-r{
-        flex: 1;
-        text-align: left;
-        color: #9E9E9E;
-        line-height: 1.5;
-        >div{
+        .desc-r {
+          flex: 1;
+          text-align: left;
+          color: #9e9e9e;
+          line-height: 1.5;
+          > div {
+          }
         }
       }
     }
   }
-  }
 }
-</style>
+</style>