config home page section width

src/assets/style/globalVars.less

@@ -1,4 +1,9 @@
-@cdn:'https://shlmuseum.oss-cn-shanghai.aliyuncs.com/shls_museum/images/';
-@inputH:30px;
-@theme:#DF3B2F;
-@sub-theme:#F5B55F;
+@cdn: "https://shlmuseum.oss-cn-shanghai.aliyuncs.com/shls_museum/images/";
+@inputH: 30px;
+@theme: #df3b2f;
+@sub-theme: #f5b55f;
+@containerW: 1338px;
+@breakpoint: 1300px;
+@sectionTitleSize: 28px;
+@fontSizeNormal: 16px;
+@fontSizeNormalLightHeight: 34px;

src/assets/style/public.less

@@ -13,7 +13,6 @@ html {
 * {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   tap-highlight-color: rgba(0, 0, 0, 0);
-  font-size: 14px;
 }
 body::-webkit-scrollbar {
   width: 1px;

src/components/section.vue

@@ -1,148 +1,167 @@
 <template>
-  <div class="section" :style="{background:$linear[`${isTheme?'w':'r'}`]}">
+  <div
+    class="section"
+    :style="{ background: $linear[`${isTheme ? 'w' : 'r'}`] }"
+  >
     <!-- <img class="s-bg" v-if="bgImg" :src="bgImg"/> -->
     <div class="s-header">
-      <img :src="`${$cdn}/images/title_icon_${isTheme?'r':'w'}.png`" alt="">
-      <span :style="{color:isTheme?'#444':'#fff'}">{{title}}</span>
+      <img
+        :src="`${$cdn}/images/title_icon_${isTheme ? 'r' : 'w'}.png`"
+        alt=""
+      />
+      <span :style="{ color: isTheme ? '#444' : '#fff' }">{{ title }}</span>
     </div>
-   
+
     <div class="section-con">
       <div class="preface" :slot="'container'">
-        <div class="txt" >
-          <p :style="{color:isTheme?'#444':'#fff'}" v-for="(item, i) in txtArr" :key="i" v-html="item"></p>
+        <div class="txt">
+          <p
+            :style="{ color: isTheme ? '#444' : '#fff' }"
+            v-for="(item, i) in txtArr"
+            :key="i"
+            v-html="item"
+          ></p>
         </div>
       </div>
-      <jieshuo v-if="!hideJiesuo" :isTheme='isTheme'/>
-      <bm-slide :isTheme='isTheme' v-if="data.length>0"  :idx='activeIdx' @activeItem="handleItem" :list='data'  class="sld-con"/>
+      <jieshuo v-if="!hideJiesuo" :isTheme="isTheme" />
+      <bm-slide
+        :isTheme="isTheme"
+        v-if="data.length > 0"
+        :idx="activeIdx"
+        @activeItem="handleItem"
+        :list="data"
+        class="sld-con"
+      />
 
       <div class="readmore">
         <span @click="goto">查看更多藏品</span>
       </div>
     </div>
-
-
   </div>
 </template>
 <script>
-import {mapState} from 'vuex'
-import jieshuo from './jieshuo'
-import bmSlide from './bmSlide/'
-
+import { mapState } from "vuex";
+import jieshuo from "./jieshuo";
+import bmSlide from "./bmSlide/";
 
 export default {
-  computed:{
+  computed: {
     ...mapState({
-      theme: state => state.common.theme
-    })
+      theme: (state) => state.common.theme,
+    }),
   },
-  components:{
+  components: {
     jieshuo,
-    bmSlide
+    bmSlide,
   },
-  props:{
-    txtArr:{
-      type:Array,
-      default(){
-        return []
-      }
+  props: {
+    txtArr: {
+      type: Array,
+      default() {
+        return [];
+      },
     },
-    data:{
-      type:Array,
-      default(){
-        return []
-      }
+    data: {
+      type: Array,
+      default() {
+        return [];
+      },
     },
-    activeIdx:{
-      type:Number,
-      default: 0
+    activeIdx: {
+      type: Number,
+      default: 0,
     },
-    title:{
-      type:String,
-      default:''
+    title: {
+      type: String,
+      default: "",
     },
-    hideJiesuo:{
-      type:Boolean,
-      default:false
+    hideJiesuo: {
+      type: Boolean,
+      default: false,
     },
-    titlecolor:{
-      type:String,
-      default:'#444'
+    titlecolor: {
+      type: String,
+      default: "#444",
     },
-    bgImg:{
-      type:String,
-      default:''
+    bgImg: {
+      type: String,
+      default: "",
+    },
+    isTheme: {
+      type: Boolean,
+      default: false,
     },
-    isTheme:{
-      type:Boolean,
-      default:false
-    }
   },
-  methods:{
-    handleItem(item){
-      this.$emit('activeItem',item)
+  methods: {
+    handleItem(item) {
+      this.$emit("activeItem", item);
+    },
+    goto() {
+      this.$router.push({
+        name: "collection",
+        params: { type: this.data[0].type },
+      });
     },
-    goto(){
-      this.$router.push({name:'collection',params:{type:this.data[0].type}})
-    }
   },
-  mounted(){
-  }
-}
+  mounted() {},
+};
 </script>
 
 <style lang="less" scoped>
-@cdn:'https://houseoss.4dkankan.com/chuanshan';
-
-.section{
+@import "../assets/style/globalVars.less";
+@cdn: "https://houseoss.4dkankan.com/chuanshan";
+.section {
   margin: 0 auto;
   padding: 7.5rem 0 4.17rem;
   position: relative;
   overflow: hidden;
-  .s-header{
+  .s-header {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     height: 1.75rem;
     margin: 0 auto 1.25rem;
-    img{
+    img {
       width: 2.5rem;
       margin-right: 1.25rem;
     }
-    span{
+    span {
       font-size: 1.5rem;
       font-weight: bolder;
       line-height: 1;
       display: inline-block;
-      margin: 0 .83rem;
+      margin: 0 0.83rem;
       vertical-align: middle;
       color: #444444;
     }
   }
 
-  .section-con{
-    .txt{
+  .section-con {
+    width: @containerW;
+    margin: 0 auto;
+    .txt {
       width: 80%;
       min-width: 41.67rem;
       margin: 3.83rem auto;
-      >p{
-        line-height: 1.5rem;
+      > p {
+        font-size: @fontSizeNormal;
+        line-height: @fontSizeNormalLightHeight;
         text-indent: 2rem;
         text-align: justify;
         font-size: 1rem;
         color: #444;
-        &:last-of-type{
+        &:last-of-type {
           margin-bottom: 3.83rem;
         }
       }
     }
-    .sld-con{
+    .sld-con {
       width: 80%;
       margin: 3.83rem auto;
     }
-    .readmore{
-
-      span{
+    .readmore {
+      span {
         cursor: pointer;
         display: inline-block;
         color: @theme;
@@ -156,7 +175,7 @@ export default {
     }
   }
 
-  .s-bg{
+  .s-bg {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -166,4 +185,4 @@ export default {
     z-index: -1;
   }
 }
-</style>
+</style>

src/components/showCollection.vue

@@ -70,7 +70,7 @@ export default {
     },
     hideFullPic() {
       this.isShowFull = false;
-          this.$hideBroadcast();
+      this.$hideBroadcast();
     },
   },
 };