党员之家更新

src/components/member.vue

@@ -16,13 +16,13 @@
             <gaoceng :carouselList="carouselList" :newsList="newsList"></gaoceng>
           </el-col>
           <el-col :span="24" class="main_3">
-            <dangjian :rencaiList="rencaiList"></dangjian>
+            <dangjian :rencaiList="rencaiList" :dangjianList="dangjianList" :yaowenList="yaowenList"></dangjian>
           </el-col>
           <el-col :span="24" class="main_4">
-            <xuexi></xuexi>
+            <xuexi :dangguiList="dangguiList" :zhishiList="zhishiList" :zhunti="zhunti"></xuexi>
           </el-col>
           <el-col :span="24" class="main_5">
-            <photo></photo>
+            <photo :tujiList="tujiList"></photo>
           </el-col>
         </div>
       </el-col>
@@ -51,6 +51,12 @@ export default {
     carouselList: null, //轮播图
     newsList: null, //轮播图右侧新闻列表
     rencaiList: null, //人才建设
+    dangjianList: null, //基层党建
+    yaowenList: null, //党建要闻
+    dangguiList: null, //党规党章
+    zhishiList: null, //知识问答
+    zhunti: null, //专题学习
+    tujiList: null, //活动图集
   },
   components: {
     top, //头部信息
@@ -99,22 +105,19 @@ export default {
   margin: 30px 0 0 0;
 }
 .main_3 {
-  height: 480px;
+  height: 400px;
   overflow: hidden;
   margin: 30px 0 0 0;
-  border: 1px solid #ccc;
 }
 .main_4 {
   height: 420px;
   overflow: hidden;
   margin: 30px 0 0 0;
-  border: 1px solid #ccc;
 }
 .main_5 {
-  height: 560px;
+  height: 500px;
   overflow: hidden;
   margin: 30px 0 0 0;
-  border: 1px solid #ccc;
 }
 .down {
   height: 135px;

src/layout/member/dangjian.vue

@@ -34,32 +34,34 @@
         <el-col :span="8" class="infoLeft">
           <el-col :span="24" class="infoLeftTop">
             <el-col :span="18" class="leftTopTitle">
-              <span>{{ leftTopTitle }}</span>
+              <span>{{ centerTopTitle }}</span>
             </el-col>
             <el-col :span="6" class="leftTopMore">
               <el-link :underline="false">更多<i class="el-icon-plus"></i></el-link>
             </el-col>
           </el-col>
-          <el-col :span="24" class="infoLeftList">
-            <el-col :span="24" class="rencaiList" v-for="(item, index) in rencaiList" :key="index">
-              <el-col :span="16" class="title">
-                <p class="textOver"><i class="el-icon-s-flag icon"></i>{{ item.title }}</p>
+          <el-col :span="24" class="infoCenterList">
+            <el-col :span="12" class="dangjianList" v-for="(item, index) in dangjianList" :key="index">
+              <el-col :span="24" class="imageTit">
+                <el-image style="width:180px;height:120px;" :src="item.url"></el-image>
+              </el-col>
+              <el-col :span="24" class="title">
+                <p>{{ item.title }}</p>
               </el-col>
-              <el-col :span="8" class="date"> [{{ item.date }}] </el-col>
             </el-col>
           </el-col>
         </el-col>
         <el-col :span="8" class="infoLeft">
           <el-col :span="24" class="infoLeftTop">
             <el-col :span="18" class="leftTopTitle">
-              <span>{{ leftTopTitle }}</span>
+              <span>{{ rightTopTitle }}</span>
             </el-col>
             <el-col :span="6" class="leftTopMore">
               <el-link :underline="false">更多<i class="el-icon-plus"></i></el-link>
             </el-col>
           </el-col>
           <el-col :span="24" class="infoLeftList">
-            <el-col :span="24" class="rencaiList" v-for="(item, index) in rencaiList" :key="index">
+            <el-col :span="24" class="rencaiList" v-for="(item, index) in yaowenList" :key="index">
               <el-col :span="16" class="title">
                 <p class="textOver"><i class="el-icon-s-flag icon"></i>{{ item.title }}</p>
               </el-col>
@@ -77,13 +79,17 @@ export default {
   name: 'dangjian',
   props: {
     rencaiList: null,
+    dangjianList: null,
+    yaowenList: null,
   },
   components: {},
   data: () => ({
     title: '基层党建',
+    leftTopTitle: '人才建设',
+    centerTopTitle: '党建综合',
+    rightTopTitle: '党建要闻',
     left: require('@/assets/messageLeft.jpg'),
     right: require('@/assets/messageRight.jpg'),
-    leftTopTitle: '人才建设',
   }),
   created() {},
   computed: {},
@@ -122,11 +128,14 @@ p {
   overflow: hidden;
 }
 .infoLeft {
-  width: 380px;
-  height: 400px;
+  width: 400px;
+  height: 318px;
   overflow: hidden;
   margin: 0 30px 0 0;
 }
+.infoLeft:last-child {
+  margin: 0;
+}
 .infoLeftTop {
   height: 40px;
   line-height: 40px;
@@ -148,7 +157,7 @@ p {
   padding: 0 10px;
 }
 .rencaiList {
-  padding: 11px;
+  padding: 9px;
 }
 .rencaiList .title p {
   font-size: 16px;
@@ -168,4 +177,40 @@ p {
 .rencaiList:hover .date {
   color: #bd000b;
 }
+.infoCenterList {
+  margin: 18px 0 0 0;
+}
+.dangjianList {
+  position: relative;
+  width: 180px;
+  height: 120px;
+  overflow: hidden;
+  margin: 0 15px 10px 15px;
+}
+.dangjianList:nth-child(2n) {
+  margin: 0;
+}
+.dangjianList .title {
+  position: absolute;
+  top: 0;
+  width: 180px;
+  height: 120px;
+  background: #0000004f;
+  display: none;
+}
+.dangjianList:hover .title {
+  display: block;
+}
+.dangjianList .title p {
+  color: #fff;
+  font-size: 18px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 36px 10px;
+}
 </style>

src/layout/member/photo.vue

@@ -13,7 +13,30 @@
         </el-col>
       </el-col>
       <el-col :span="24" class="info">
-        内容
+        <el-col :span="24" class="list">
+          <el-col :span="6" class="tujiList" v-for="(item, index) in tujiList" :key="index">
+            <el-col :span="24" class="image">
+              <el-image style="width:270px;height:180px;" :src="item.url"></el-image>
+            </el-col>
+            <el-col :span="24" class="title">
+              <p class="textOver">{{ item.title }}</p>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="link">
+          <el-link :underline="false" href="http://www.dangjian.com/djw2016sy/djw2016wkztl/wkztl2016djzzwk/" class="image" target="_blank">
+            <el-image style="width:285px;height:140px;" :src="link1"></el-image>
+          </el-link>
+          <el-link :underline="false" href="http://xuexi.12371.cn/xxhywx/" class="image" target="_blank">
+            <el-image style="width:285px;height:140px;" :src="link2"></el-image>
+          </el-link>
+          <el-link :underline="false" href="http://www.dangjian.com/specials/" class="image" target="_blank">
+            <el-image style="width:285px;height:140px;" :src="link3"></el-image>
+          </el-link>
+          <el-link :underline="false" href="http://dwlm.12371.cn/" class="image" target="_blank">
+            <el-image style="width:285px;height:140px;" :src="link4"></el-image>
+          </el-link>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -22,12 +45,18 @@
 <script>
 export default {
   name: 'photo',
-  props: {},
+  props: {
+    tujiList: null,
+  },
   components: {},
   data: () => ({
     title: '活动图集',
     left: require('@/assets/messageLeft.jpg'),
     right: require('@/assets/messageRight.jpg'),
+    link1: require('@/assets/tuji5.jpg'),
+    link2: require('@/assets/tuji6.jpg'),
+    link3: require('@/assets/tuji7.jpg'),
+    link4: require('@/assets/tuji8.jpg'),
   }),
   created() {},
   computed: {},
@@ -57,4 +86,49 @@ p {
   font-weight: bold;
   font-family: '微软雅黑';
 }
+.link {
+  height: 140px;
+  overflow: hidden;
+}
+.link .image {
+  width: 285px;
+  height: 140px;
+  margin: 0 15px;
+}
+.link .image:last-child {
+  margin: 0 0 0 15px;
+}
+.list {
+  margin: 0 0 40px 0;
+}
+.tujiList {
+  width: 270px;
+  height: 210px;
+  overflow: hidden;
+  margin: 0px 25px 0 25px;
+}
+.tujiList:last-child {
+  margin: 0px 0 0 25px;
+}
+.tujiList .image {
+  width: 270px;
+  height: 180px;
+  overflow: hidden;
+}
+.tujiList .title {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  text-align: center;
+}
+.tujiList .title p {
+  font-size: 16px;
+  color: #333;
+}
+.tujiList:hover {
+  cursor: pointer;
+}
+.tujiList:hover .title p {
+  color: #bd010b;
+}
 </style>

src/layout/member/top.vue

@@ -38,12 +38,12 @@ export default {
 }
 .info {
   position: absolute;
-  top: 30%;
+  top: 32%;
   left: 25%;
   width: 50%;
 }
 .info span {
-  font-size: 45px;
+  font-size: 35px;
   color: #df0001;
   font-family: '黑体';
 }

src/layout/member/xuexi.vue

@@ -13,7 +13,53 @@
         </el-col>
       </el-col>
       <el-col :span="24" class="info">
-        内容
+        <el-col :span="8" class="infoLeft">
+          <el-col :span="24" class="infoLeftTop">
+            <el-col :span="18" class="leftTopTitle">
+              <span>{{ leftTopTitle }}</span>
+            </el-col>
+            <el-col :span="6" class="leftTopMore">
+              <el-link :underline="false">更多<i class="el-icon-plus"></i></el-link>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="infoLeftList">
+            <el-col :span="24" class="rencaiList" v-for="(item, index) in dangguiList" :key="index">
+              <el-col :span="24" class="title">
+                <p class="textOver"><i class="el-icon-s-flag icon"></i>{{ item.title }}</p>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="8" class="infoLeft">
+          <el-col :span="24" class="infoLeftTop">
+            <el-col :span="18" class="leftTopTitle">
+              <span>{{ centerTopTitle }}</span>
+            </el-col>
+            <el-col :span="6" class="leftTopMore">
+              <el-link :underline="false">更多<i class="el-icon-plus"></i></el-link>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="infoLeftList">
+            <el-col :span="24" class="zhishiList" v-for="(item, index) in zhishiList" :key="index">
+              <el-col :span="24" class="title">
+                <p class="textOver color">问：{{ item.title }}</p>
+              </el-col>
+              <el-col :span="24" class="title">
+                <p class="textOver">答：{{ item.content }}</p>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="8" class="infoLeft">
+          <el-col :span="24" class="infoLeftTop">
+            <el-col :span="24" class="leftTopTitle">
+              <span>{{ rightTopTitle }}</span>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="infoRightList">
+            <el-image style="width:400px;height:267px;" :src="zhunti.url"></el-image>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -22,10 +68,17 @@
 <script>
 export default {
   name: 'xuexi',
-  props: {},
+  props: {
+    dangguiList: null,
+    zhishiList: null,
+    zhunti: null,
+  },
   components: {},
   data: () => ({
     title: '学习园地',
+    leftTopTitle: '党规党章',
+    centerTopTitle: '知识问答',
+    rightTopTitle: '专题学习',
     left: require('@/assets/messageLeft.jpg'),
     right: require('@/assets/messageRight.jpg'),
   }),
@@ -45,6 +98,10 @@ p {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.icon {
+  color: #bd010b;
+  margin: 0 15px 0 0;
+}
 .top {
   height: 40px;
   line-height: 40px;
@@ -57,4 +114,80 @@ p {
   font-weight: bold;
   font-family: '微软雅黑';
 }
+.info {
+  height: 400px;
+  overflow: hidden;
+}
+.infoLeft {
+  width: 400px;
+  height: 337px;
+  overflow: hidden;
+  margin: 0 30px 0 0;
+}
+.infoLeft:last-child {
+  margin: 0;
+}
+.infoLeftTop {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid #ccc;
+}
+.infoLeftTop .leftTopTitle span {
+  display: inline-block;
+  width: 100px;
+  height: 39px;
+  text-align: center;
+  border-bottom: 1px solid #bd010b;
+  font-size: 18px;
+  color: #bd000b;
+}
+.infoLeftTop .leftTopMore {
+  height: 39px;
+  line-height: 30px;
+  text-align: right;
+  padding: 0 10px;
+}
+.rencaiList {
+  padding: 8px;
+}
+.rencaiList .title p {
+  font-size: 16px;
+  color: #333;
+}
+.rencaiList .date {
+  font-size: 16px;
+  color: #333;
+  text-align: right;
+}
+.rencaiList:hover {
+  cursor: pointer;
+}
+.rencaiList:hover .title p {
+  color: #bd000b;
+}
+.rencaiList:hover .date {
+  color: #bd000b;
+}
+.zhishiList {
+  padding: 8px;
+}
+.zhishiList .title {
+  padding: 4px 0;
+}
+.zhishiList .title p {
+  font-size: 16px;
+  color: #333;
+}
+.zhishiList .title .color {
+  color: #bd000b;
+}
+.zhishiList:hover {
+  cursor: pointer;
+}
+.infoRightList {
+  padding: 15px 0;
+}
+.infoRightList:hover {
+  cursor: pointer;
+}
 </style>

src/views/member.vue

@@ -7,6 +7,12 @@
       :carouselList="carouselList"
       :newsList="newsList"
       :rencaiList="rencaiList"
+      :dangjianList="dangjianList"
+      :yaowenList="yaowenList"
+      :dangguiList="dangguiList"
+      :zhishiList="zhishiList"
+      :zhunti="zhunti"
+      :tujiList="tujiList"
     ></member-detail>
   </div>
 </template>
@@ -47,6 +53,65 @@ export default {
         title: '市委常委会召开“不忘初心、牢记使命“专题民主生活会',
         date: '2019-12-11',
       },
+      {
+        title: '七条数据',
+        date: '2019-12-11',
+      },
+    ],
+    dangjianList: [
+      {
+        url: require('@/assets/news.jpg'),
+        title: '标题',
+      },
+    ],
+    yaowenList: [
+      {
+        title: '党建要闻',
+        date: '2019-12-11',
+      },
+      {
+        title: '七条数据',
+        date: '2019-12-11',
+      },
+    ],
+    dangguiList: [
+      {
+        title: '党规党章',
+      },
+      {
+        title: '八条数据',
+      },
+    ],
+    zhishiList: [
+      {
+        title: '知识问答',
+        content: '知识问答答案',
+      },
+      {
+        title: '四条',
+        content: '知识问答答案',
+      },
+    ],
+    zhunti: {
+      url: require('@/assets/news.jpg'),
+    },
+    tujiList: [
+      {
+        url: require('@/assets/tuji1.jpg'),
+        title: '标题',
+      },
+      {
+        url: require('@/assets/tuji2.jpg'),
+        title: '标题',
+      },
+      {
+        url: require('@/assets/tuji3.jpg'),
+        title: '标题',
+      },
+      {
+        url: require('@/assets/tuji4.jpg'),
+        title: '标题',
+      },
     ],
   }),
   created() {},