Explorar el Código

提交活动策划及详情页

dev01 hace 3 años
padre
commit
4403d361bd

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "aft-portal",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "description": "",
   "main": "index.js",
   "scripts": {

+ 82 - 0
src/css/eventDtalis.css

@@ -0,0 +1,82 @@
+.main {
+  background: #F5F5F5;
+  padding: 30px 0;
+  padding-bottom: 70px;
+}
+
+.bread-crumbs {
+  background: #F5F5F5;
+  width: 100%;
+  padding: 30px 0;
+  padding-bottom: 0;
+}
+
+.bread-crumbs ul li {
+  display: inline-block;
+}
+
+.bread-crumbs ul li.active a {
+  color: #1296DB;
+}
+
+.bread-crumbs ul li a {
+  font-size: 18px;
+  color: #666666;
+}
+
+.container {
+  width: 1250px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.news-detail {
+  width: 1250px;
+  background: #ffffff;
+  padding: 50px;
+}
+
+.detail-title {
+  border-bottom: 1px solid #bdbbbb;
+  padding-bottom: 20px;
+}
+
+.detail-content {
+  padding-top: 40px;
+}
+
+.detail-content p {
+  color: #666666;
+  font-size: 16px;
+  line-height: 1.6;
+  text-indent: 30px;
+}
+
+.detail-content p {
+    color: #666666;
+    font-size: 16px;
+    line-height: 1.6;
+    text-indent: 30px;
+}
+
+.detail-content img {
+  display: block;
+  margin: 20px auto;
+  width: 550px;
+}
+
+.news .news-detail img {
+  max-width: 1150px;
+}
+
+.detail-title h6 {
+  font-size: 36px;
+  color: #333333;
+}
+
+.detail-title span {
+  font-size: 20px;
+  color: #999999;
+}

+ 122 - 0
src/css/eventPlanning.css

@@ -0,0 +1,122 @@
+.btns {
+  display: inline-block;
+}
+.main {
+  background-color: #F5F5F5;
+}
+.app .page_1 {
+  margin: 40px 0;
+}
+
+.app .page_1 .page_ctrl {
+  text-align: center;
+  margin: 10px auto;
+  box-sizing: border-box;
+}
+
+.app .page_1 .page_ctrl .page_total {
+  font-size: 15px;
+  color: #999;
+}
+
+.app .page_1 .page_ctrl .prev_page {
+  cursor: default;
+  opacity: .7;
+  background-color: #eee;
+  color: #616161;
+  border: 1px solid #999999;
+}
+/* .icon-xiangzuo:before {
+  content: "\e654";
+}
+.icon-xiangyou:before {
+  content: "\e653";
+} */
+.app .page_ctrl button,
+.app .input_page_num {
+  font-size: 12px;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  background-color: #fff;
+  border-radius: 25px;
+  color: #999;
+  cursor: pointer;
+  outline: none;
+  text-align: center;
+  margin: 0 6px;
+  margin-bottom: 16px;
+  border: 0;
+}
+/* .app .page_ctrl button:hover{
+  background-color: #1296DB;
+  color: #fff;
+} */
+.app .btns .pagebtn {
+  position: relative;
+  top: 5px;
+  line-height: 0;
+}
+
+.app .newslist li {
+  margin-top: 20px;
+  background: #ffffff;
+  cursor: pointer;
+  width: 1250px;
+  height: 272px;
+  padding: 36px 50px;
+  transition: all .36s ease;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.app .newslist li:hover {
+  top: -10px;
+  box-shadow: 0 0 5px #888888;
+}
+
+.app .newslist li .newslist_img {
+  float: left;
+  width: 345px;
+  height: 200px;
+}
+
+.app .newslist li .newslist_img img {
+  width: 345px;
+  height: 200px;
+}
+
+.app .newslist li .newslist_content {
+  float: left;
+  width: 735px;
+  margin-left: 70px;
+  height: 200px;
+}
+
+.app .newslist li .newslist_content .title {
+  color: #333;
+  font-size: 24px;
+}
+
+.app .newslist li .newslist_content .date {
+  color: #666;
+  font-size: 17px;
+  margin: 12px 0;
+}
+
+.app .newslist li .newslist_content .content {
+  color: #666;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+  overflow: hidden
+}
+
+.btn {
+  padding: 0;
+}
+
+.login {
+  transition: all 0.6s ease-in;
+}

+ 4 - 0
src/css/newMenu/header.css

@@ -74,6 +74,10 @@ div.APP:hover{background-color: #fff;}
     margin-right: 10px;
 }
 
+.header .technology a:hover {
+    color: #337ab7;
+}
+
 
 
 .webkitDown{

+ 5 - 1
src/css/public.css

@@ -399,7 +399,7 @@ header .nav_right .head_login {
 
 .text_top>a {
 	/*color: #fff;*/
-	color:##337ab7!important;
+	color: #337ab7!important;
 	line-height: 25px;
 }
 
@@ -507,6 +507,10 @@ header .nav_right .head_login {
 	margin-right: 5px;
 }
 
+.ios {
+	margin-right: 5px;
+}
+
 
 /*右侧挂件*/
 

+ 1 - 0
src/js/eventDtalis.js

@@ -0,0 +1 @@
+import "../css/eventDtalis.css"

+ 295 - 192
src/js/eventPlanning.js

@@ -1,4 +1,15 @@
+import "../css/eventPlanning.css"
+
 window.onload = function () {
+  let value = ''
+  let totalCount = '' // 总数据条数
+  let pageNo = 1 // 页码
+  let pageSize = 10 // 一页多少条数据
+  let selected = 1 // 当前选中按钮的序号
+  let pagenum = '' // 有多少页数据
+  let btnstart = 3 // 可移动按钮组开始序号
+  let btnend = btnstart + 6 // 可移动按钮组结束序号
+  let buer = null
   $.ajax({
     method: "get",
     dataType: "json",
@@ -12,219 +23,311 @@ window.onload = function () {
       if (data.error && data.error.length) {
         alert("数据加载失败,请刷新页面");
       } else {
+        totalCount = data.data.totalCount
+        pagenum = Math.ceil(totalCount / pageSize)
+
+        // 渲染新闻列表
         $.each(data.data.list, function (index, item) {
-          console.log(index, item);
           // 新闻列表
-          let part = `<li>
-        <a href="javascript:;">
+          let part = `<li id="${item.id}">
           <div class="newslist_img"><img src="${globalConfig.avatarUploadHost + item.pictureUrl}" alt=""></div>
           <div class="newslist_content">
             <h6 class="title">${item.title}</h6>
             <div class="date">${item.createTimes}</div>
             <p class="content">${item.content}</p>
           </div>
-        </a>
         </li>`
-          $(".app .newslist").prepend(part)
-          $(".app .newslist li .newslist_img").css({
-            "float": "left",
-            "width": "345px",
-            "height": "200px"
+          $(".app .newslist").append(part)
+        })
+
+        let paging = `    <div class="page_ctrl">
+          <span class="page_total">共 ${pagenum} 页</span>
+          <button class="prev_page"><</button>
+          <div class="btns"></div>
+          <button class="next_page">></button>
+          <span class="page_total">到第</span>
+          <input class="input_page_num" type="text">
+          <span class="page_total">页</span>
+          <button class="determine">确定</button>
+        </div>`
+        $(".app .page_1").html(paging) // 插入html片段
+        pagebtns() // 生成可移动按钮
+        select() // 给按钮添加点击事件
+        $(".determine").click(function () {
+          if ($(".input_page_num").val() < 1 || $(".input_page_num").val() > pagenum) return
+          selected = $(".input_page_num").val()
+          $(".input_page_num").val("")
+          jump()
+        })
+        // 点击左边按钮
+        $(".prev_page").click(function () {
+          if (selected == 1) return
+          selected--
+          if (selected > 4 && pagenum > 9 && selected < pagenum - 4) {
+            if ($(".more").length < 1) {
+              $(".btns").after('<span class="more">...</span>')
+            }
+            $(".btn").remove()
+            if (buer) {
+              btnstart--
+              btnend--
+              buer = false
+            }
+            for (let i = btnstart; i <= btnend; i++) {
+              let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
+              $(".btns").append(pagebtn)
+            }
+          }
+          if (selected > 5 && selected < pagenum - 3) {
+            --btnstart
+            --btnend
+          }
+          if (selected == 4) {
+            btnstart = 3
+            btnend = btnstart + 6
+          }
+          if (selected == 5) {
+            $(".beforemore").remove()
+          }
+          select()
+          request()
+          bidden()
+          $(".pagebtn").css({
+            "background": "#fff",
+            "color": "#999"
           })
-          $(".app .newslist li .newslist_img img").css({
-            "width": "345px",
-            "height": "200px"
+          $(`.pagebtn[index="${selected}"]`).css({
+            "background": "#1296DB",
+            "color": "#fff"
           })
-          $(".app .newslist li .newslist_content").css({
-            "float": "left",
-            "width": "735px",
-            "margin-left": "70px",
-            "height": "200px"
+        })
+        // 点击右边按钮
+        $(".next_page").click(function () {
+          if (selected == pagenum) return
+          selected++
+          if (selected > 5 && pagenum > 9 && selected < pagenum - 3) {
+            if ($(".beforemore").length < 1) {
+              $(".btns").before('<span class="beforemore">...</span>')
+            }
+            $(".btn").remove()
+            if (buer) {
+              console.log(123);
+              btnstart++
+              btnend++
+              buer = false
+            }
+            for (let i = btnstart; i <= btnend; i++) {
+              let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
+              $(".btns").append(pagebtn)
+            }
+          }
+          if (selected > 5 && selected < pagenum - 4) {
+            btnstart++
+            btnend++
+          }
+          if (selected == pagenum - 4) {
+            $(".more").remove()
+          }
+          select()
+          request()
+          bidden()
+          $(".pagebtn").css({
+            "background": "#fff",
+            "color": "#999"
+          })
+          $(`.pagebtn[index="${selected}"]`).css({
+            "background": "#1296DB",
+            "color": "#fff"
           })
-          $(".app .newslist li .newslist_content .title").css({
-            "color": "#333",
-            "font-size": "24px"
+        })
+        // 生成按钮组
+        function pagebtns() {
+          if (pagenum <= 9) {
+            $(".prev_page").after(`<button class="pagebtn" index="1">1</button>`)
+            pagebtn(pagenum)
+          } else {
+            $(".prev_page").after(`<button class="pagebtn" index="1">1</button>`)
+            pagebtn(8)
+            $(".next_page:last").before(`<span class="more">...<span>`)
+            $(".next_page").before(`<button class="pagebtn" index="${pagenum}">${pagenum}</button>`)
+          }
+        }
+        // 生成按钮组
+        function pagebtn(pagenum) {
+          for (let i = 2; i <= pagenum; i++) {
+            let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
+            $(".btns").append(pagebtn)
+            $(".pagebtn:first").css({
+              "background": "#1296DB",
+              "color": "white"
+            })
+          }
+        }
+        // 点击按钮组
+        function select() {
+          $(".pagebtn").click(function () {
+            selected = $(this).attr("index")
+            console.log("woanle");
+            jump()
+            $(".pagebtn").css({
+              "background": "#fff",
+              "color": "#999"
+            })
+            $(this).css({
+              "background": "#1296DB",
+              "color": "white"
+            })
           })
-          $(".app .newslist li .newslist_content .date").css({
-            "color": "#666",
-            "font-size": "17px",
-            "margin": "12px 0"
+        }
+
+        function jump() {
+          if (selected > 5 && pagenum > 9 && selected < pagenum - 4) {
+            if ($(".more").length < 1) {
+              $(".btns").after('<span class="more">...</span>')
+            }
+            if ($(".beforemore").length < 1) {
+              $(".btns").before('<span class="beforemore">...</span>')
+            }
+            $(".btn").remove()
+            for (let i = selected - 3; i <= Number(selected) + 3; i++) {
+              let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
+              $(".btns").append(pagebtn)
+            }
+            btnstart = Number(selected) - 3
+            btnend = Number(selected) + 3
+            buer = true
+            select()
+          } else if (selected < 6) {
+            $(".beforemore").remove()
+            btnstart = 2
+            btnend = btnstart + 6
+            $(".btn").remove()
+            for (let i = btnstart; i <= btnend; i++) {
+              let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
+              $(".btns").append(pagebtn)
+            }
+            select()
+          } else if (selected > pagenum - 5) {
+            $(".more").remove()
+            btnend = pagenum - 1
+            btnstart = btnend - 6
+            $(".btn").remove()
+            for (let i = btnstart; i <= btnend; i++) {
+              let pagebtn = `<button class="pagebtn btn" index="${i}">${i}</button>`
+              $(".btns").append(pagebtn)
+            }
+            select()
+          }
+          console.log(btnend, btnstart);
+          request()
+          select()
+          bidden()
+          $(".pagebtn").css({
+            "background": "#fff",
+            "color": "#999"
           })
-          $(".app .newslist li .newslist_content .content").css({
-            "color": "#666",
-            "display": "-webkit-box",
-            "-webkit-box-orient": "vertical",
-            "-webkit-line-clamp": "6",
-            "overflow": "hidden"
+          $(`.pagebtn[index="${selected}"]`).css({
+            "background": "#1296DB",
+            "color": "#fff"
           })
-          $(".app .newslist li").css({
-            "width": "1250px",
-            "height": "272px",
-            "padding": "36px 50px",
-            "transition": "all .36s ease",
-            "position": "relative",
-            "top": "0",
-            "left": "0"
+        }
+
+        function request() {
+          $.ajax({
+            method: "get",
+            dataType: "json",
+            url: "/open/getEventPlanningList",
+            data: {
+              pageSize: 10,
+              pageNo: selected
+            },
+            success: function (data) {
+              $(".newslist").empty()
+              // 渲染新闻列表
+              $.each(data.data.list, function (index, item) {
+                // 新闻列表
+                let part = `<li id="${item.id}">
+                              <div class="newslist_img"><img src="${globalConfig.avatarUploadHost + item.pictureUrl}" alt=""></div>
+                              <div class="newslist_content">
+                                <h6 class="title">${item.title}</h6>
+                                <div class="date">${item.createTimes}</div>
+                                <p class="content">${item.content}</p>
+                              </div>
+                            </li>`
+                $(".app .newslist").append(part)
+                $(`.pagebtn[index="${selected}"]`).css({
+                  "background": "#1296DB",
+                  "color": "#fff"
+                })
+              })
+              $(".newslist li").click(function () {
+                let id = $(this).attr("id")
+                window.location.pathname = `/eventPlanning/${id}`
+              })
+            }
           })
+        }
+
+        $(".newslist li").click(function () {
+          let id = $(this).attr("id")
+          window.location.pathname = `/eventPlanning/${id}`
         })
 
-        // 页码
-        let page = `<div class="page_ctrl">
-            <span class="page_total">共 ${Math.ceil(data.data.totalCount/10)} 页</span>
-            <button class="prev_page"><</button>
-            <button class="">></button>
-            <span class="page_total">到第</span>
-            <input class="input_page_num" type="text">
-            <span class="page_total">页</span>
-            <button>确定</button>
-          </div>`
-        let pagebtn = 
+        function bidden() {
+          if (selected == 1) {
+            $(".prev_page").css({
+              "cursor": "default",
+              "opacity": ".7",
+              "background-color": "#eee",
+              "color": "#616161",
+              "border": "1px solid #999999"
+            })
+          } else {
+            $(".prev_page").css({
+              "background-color": "#fff",
+              "color": "#999",
+              "cursor": "pointer",
+              "border": "0"
+            })
+          }
+          if (selected == pagenum) {
+            $(".next_page").css({
+              "cursor": "default",
+              "opacity": ".7",
+              "background-color": "#eee",
+              "color": "#616161",
+              "border": "1px solid #999999"
+            })
+          } else {
+            $(".next_page").css({
+              "background-color": "#fff",
+              "color": "#999",
+              "cursor": "pointer",
+              "border": "0"
+            })
+          }
+        }
 
-        $(".app .page_1").prepend(page)
-        $(".app .page_1").css({"margin": "40px 0"})
-        $(".app .page_1 .page_ctrl").css({
-          "text-align": "center",
-          "margin": "10px auto",
-          "box-sizing": "border-box"
+        $(".technology_login").click(function () {
+          let loginTxt = $('.head_login')[0];
+          if (loginTxt && ($(loginTxt).text()) == '登录') {
+            $('.head_login').click();
+            window.location.hash = 'jump';
+            $(".login").css({"display" : "block"})
+            return false;
+          } else {
+            if (window.adminData && window.adminData.mobile) {
+              msg('账号不正确,请退出重新登入。')
+              return;
+            }
+            window.location.href = globalConfig.context + '/user/account/index.html#/demand';
+          }
         })
-        $(".app .page_1 .page_ctrl .page_total").css({
-          "font-size" : "15px",
-          "color": "#999"
+
+        $(".login_close").click(function(){
+          $(".login").css({"display" : "none"})
         })
-        $(".app .page_1 .page_ctrl .prev_page").css({
-          "cursor": "default",
-          "opacity": ".7",
-          "background": "#eee",
-          "color": "#616161",
-          "border": "1px solid #999999"
-       })
-       $(".app .page_ctrl button,.app .input_page_num").css({
-        "font-size": "12px",
-        "width": "32px",
-        "height": "32px",
-        "line-height": "32px",
-        "background": "#ffffff",
-        "border-radius": "25px",
-        "color": "#999999",
-        "cursor": "pointer",
-        "outline": "none",
-        "text-align": "center",
-        "margin": "0 6px",
-        "margin-bottom": "16px",
-        "border" : "1px solid #000"
-       })
       }
     }
   })
-
-
-}
-
-// function page_ctrl(data_obj) {
-//   //分页元素
-//   var obj_box = (data_obj.obj_box !== undefined) ? data_obj.obj_box : function() { return; };
-//   //总共数据条数
-//   var total_item = (data_obj.total_item !== undefined) ? parseInt(data_obj.total_item) : 0;
-//   //每页显示数据条数
-//   var per_num = (data_obj.per_num !== undefined) ? parseInt(data_obj.per_num) : 5;
-//   //当前页数
-//   var current_page = (data_obj.current_page !== undefined) ? parseInt(data_obj.current_page) : 1;
-//   //总页数
-//   var total_page = Math.ceil(total_item / per_num);
-//   // if (total_page < 2) { return; }
-//   //插入放数据的div
-//   $(obj_box).html('<div class="page_content"></div>');
-
-//   //插入放页码的div
-//   $(obj_box).html('<div class="page_ctrl"></div>');
-
-//   $('.page_activitiesPage').css({display:'none'});    //首次进入隐藏翻页组件
-
-//   function page_even() {
-//       //只能传达数字
-//       var regPos = /^\d+$/;
-//       //如果当前页数不是数字
-//       if (regPos.test(current_page)) {
-//           current_page = current_page < 1 ? 1 : (current_page > total_page ? total_page : current_page);
-//       } else {
-//           current_page = 1;
-//       }
-//       //调用 回调函数
-//       data_obj.change_content(per_num, current_page);
-//       var inp_val = (current_page == total_page) ? 1 : current_page;
-//       //分页div前半部分
-//       var append_html = '<span class="page_total">共 ' + total_page + ' 页</span><button class="iconfont icon-xiangzuo prev_page"></button>';
-//       //页码数量
-//       for (var i = 0; i < total_page - 1; i++) {
-//           if (total_page > 8 && current_page > 6 && i < current_page - 3) {
-//               if (i < 2) {
-//                   append_html += '<button class="page_num">' + (i + 1) + '</button>';
-//               } else if (i == 2) {
-//                   append_html += '<span class="page_dot">...</span>';
-//               }
-//           } else if (total_page > 8 && current_page < total_page - 3 && i > current_page + 1) {
-//               if (current_page > 6 && i == current_page + 2) {
-//                   append_html += '<span class="page_dot">...</span>';
-//               } else if (current_page < 7) {
-//                   if (i < 8) {
-//                       append_html += '<button class="page_num">' + (i + 1) + '</button>';
-//                   } else if (i == 8) {
-//                       append_html += '<span class="page_dot">...</span>';
-//                   }
-//               }
-//           } else {
-//               if (i == current_page - 1) {
-//                   append_html += '<button class="page_num current_page">' + (i + 1) + '</button>';
-//               } else {
-//                   append_html += '<button class="page_num">' + (i + 1) + '</button>';
-//               }
-//           }
-//       }
-//       //生成最后一页
-//       if (current_page == total_page) {
-//           append_html += '<button class="page_num current_page">' + (i + 1) + '</button>';
-//       } else {
-//           append_html += '<button class="page_num">' + (i + 1) + '</button>';
-//       }
-//       //分页div后半部分
-//       append_html += '<button class="iconfont icon-xiangyou next_page"></button><span class="page_total">到第</span><input class="input_page_num" type="text" ><span class="page_text">页</span><button class="to_page_num">确定</button>';
-//       $(obj_box).children('.page_ctrl').append(append_html);
-//       //左右分页按钮监控
-//       if (current_page == 1) {
-//           $(obj_box + ' .page_ctrl .prev_page').attr('disabled', 'disabled').addClass('btn_dis');
-//       } else {
-//           $(obj_box + ' .page_ctrl .prev_page').removeAttr('disabled').removeClass('btn_dis');
-//       }
-//       if (current_page == total_page) {
-//           $(obj_box + ' .page_ctrl .next_page').attr('disabled', 'disabled').addClass('btn_dis');
-//       } else {
-//           $(obj_box + ' .page_ctrl .next_page').removeAttr('disabled').removeClass('btn_dis');
-//       }
-//   };
-//   page_even();
-//   //给按钮绑定点击事件
-//   $(obj_box + ' .page_ctrl').on('click', 'button', function() {
-//       var that = $(this);
-//       if (that.hasClass('prev_page')) {
-//           if (current_page != 1) {
-//               current_page--;
-//               that.parent('.page_ctrl').html('');
-//               page_even();
-//           }
-//       } else if (that.hasClass('next_page')) {
-//           if (current_page != total_page) {
-//               current_page++;
-//               that.parent('.page_ctrl').html('');
-//               page_even();
-//           }
-//       } else if (that.hasClass('page_num') && !that.hasClass('current_page')) {
-//           current_page = parseInt(that.html());
-//           that.parent('.page_ctrl').html('');
-//           page_even();
-//       } else if (that.hasClass('to_page_num')) {
-//           current_page = parseInt(that.siblings('.input_page_num').val());
-//           that.parent('.page_ctrl').html('');
-//           page_even();
-//       }
-//   });
-// }
+}

+ 0 - 6
src/js/public.js

@@ -590,12 +590,6 @@ window.onload=function(){
 	}
 	//bannerFun();
 
-	// $('.technology .technology_login').click(function() {
-	// 	console.log(111);
-	// 	console.log(window.location.pathname);
-	// 	window.location.pathname = 'portal/evaluation/evaluate'
-	// })
-
 	$('.technology .technology_login').click(function() {
 		let loginTxt=$('.head_login')[0];
 		if(loginTxt&&($(loginTxt).text())=='登录'){

+ 6 - 1
webpack/entry.config.js

@@ -1,7 +1,8 @@
 module.exports = {
     prod: {
         'index': './src/js/newMenu/index.js',
-        'eventPlanning': './src/jseventPlanning.js',
+        'eventPlanning': './src/js/eventPlanning.js',
+        'eventDtalis': './src/js/eventDtalis.js',
         'search': './src/js/search.js',
         'aboutUs': './src/js/aboutUs.js',
         'contactUs': './src/js/contactUs.js',
@@ -63,6 +64,10 @@ module.exports = {
             'webpack/hot/only-dev-server',
             './src/js/eventPlanning.js'
         ],
+        'eventDtalis': ['webpack-dev-server/client?http://192.168.1.190', // WebpackDevServer host and port
+            'webpack/hot/only-dev-server',
+            './src/js/eventDtalis.js'
+        ],
         'search': ['webpack-dev-server/client?http://192.168.1.190', // WebpackDevServer host and port
             'webpack/hot/only-dev-server',
             './src/js/search.js'