SSM重新开发计科院主页

先来看看效果

点击新闻表项查看：

新闻编辑页面：

编辑新闻：

删除多个之后：

源码：

jky.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>计科院主页</title>
  <script src="./jquery.min.js"></script>
</head>

<body>
  <div style="width: 974px;position: relative;left: 50%;margin-left:-487px;">
    <img src="./img/head.png" alt="" width="974" height="370">
    <div class="content-wrap">
      <div style="height: 300px;">
        <div class="fl">
          <div class="title-wrap">
            <div class="title">
              图片新闻
            </div>
            <div class="more">MORE>></div>
          </div>
          <img src="./img/turn3.png" alt="" width="310" height="200" style="float: left;">
          <ul class="news-list" id="tpxw" style="float: right;">
          </ul>
        </div>
        <div class="fr">
          <div class="title-wrap">
            <div class="title">
              学术交流
            </div>
            <div class="more">MORE>></div>
          </div>
          <ul class="news-list" id="xsjl" style="width: 260px;">

          </ul>
        </div>
      </div>
      <div style="height: 450px;">
        <div class="fl">
          <div class="title-wrap">
            <div class="title">
              新闻速递
            </div>
            <div class="more">MORE>></div>
          </div>
          <ul class="news-list" id="xwsd" style="width: 590px;">

          </ul>
        </div>
        <div class="fr">
          <div class="title-wrap">
            <div class="title">
              党建动态
            </div>
            <div class="more">MORE>></div>
          </div>
          <ul class="news-list" id="djdt" style="width: 260px;">
          </ul>
        </div>
      </div>
      <div style="height: 400px;">
        <div class="fl">
          <div class="title-wrap">
            <div class="title">
              通知公告
            </div>
            <div class="more">MORE>></div>
          </div>
          <ul class="news-list" id="tzgg" style="width: 590px;">
          </ul>
        </div>
        <div class="fr">
          <div class="title-wrap">
            <div class="title">
              专题列表
            </div>
          </div>
          <ul class="news-list" id="ztlb" style="width: 260px;">
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="news-detail-wrap none">
    <div class="news-detail">
      <div style="height: 40px;
      border-bottom: 2px solid #298d94;">
        <div id="news-title">
          title
        </div>
        <div id="news-time">
          [5-11]
        </div>
      </div>
      <p id="news-content">
        this is content
      </p>
    </div>
  </div>
  <script>
    let data = {
      tpxw: '图片新闻',
      xsjl: '学术交流',
      xwsd: '新闻速递',
      djdt: '党建动态',
      tzgg: '通知公告',
      ztlb: '专题列表',
    };
    function catNews(type, index) {
      let news = data[type][index];
      $('#news-title').text(news.title);
      $('#news-time').text(news.time);
      $('#news-content').text(news.content);
      $('.news-detail-wrap').removeClass('none');
    }
    $('.news-detail-wrap').on('click', ev => {
      $('.news-detail-wrap').addClass('none');
    });
    $('.news-detail').on('click', ev => ev.stopPropagation());
    $(function () {
      let keys = Object.keys(data);
      keys.forEach(key => {
        $.ajax({
          url: '/get',
          data: {
            type: key,
            len: 15
          },
          success: res => {
            data[key] = res;
            let ul = $('#' + key);
            let index = 0;
            res.forEach(news => {
              ul.append(`
                  <li>
                  <div class="content" onclick="catNews('${key}', ${index})">
                    ${news.title}
                  </div>
                  <div class="time">
                    ${news.time}
                  </div>
                </li>
              `);
              index++;
            });
          }
        });
      });
    })
  </script>
</body>

<style>
  .fl {
    float: left;
    width: 644px;
    height: 100%;
  }

  .fr {
    float: right;
    width: 312px;
    height: 100%;
  }

  .title-wrap {
    background-color: #aaa;
    width: 100%;
    height: 30px;
  }

  .title-wrap .title {
    float: left;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    background-color: #2780cb;
    color: #eee;
  }

  .title-wrap .more {
    float: right;
    height: 30px;
    line-height: 30px;
    font-size: 8px;
  }

  .news-list {
    border: 1px solid red;
    width: 275px;
    height: 85%;
    margin: 5px 8px 5px 5px;
    font-size: 12px;
    overflow: hidden;
  }

  .news-list li {
    height: 30px;
    line-height: 30px;
  }

  .news-list li * {
    height: 30px;
    line-height: 30px;
  }

  .content {
    float: left;
    width: 220px;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .content:hover {
    color: #07b1ff;
  }

  .time {
    height: 100%;
    margin-right: 8px;
    float: right;
    font-size: 10px;
    color: #999;
  }

  #xwsd .content {
    width: 550px;
  }

  #tzgg .content {
    width: 550px;
  }

  .news-detail-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(180, 180, 180, .8);
    z-index: 999;
  }

  .none {
    display: none;
  }

  .news-detail {
    position: fixed;
    border: 1px solid #666;
    background: #fff;
    opacity: 1;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -225px;
    width: 400px;
    height: 450px;
  }

  #news-title {
    float: left;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    text-indent: 10px;
  }

  #news-time {
    float: right;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #aaa;
    margin-right: 5px;
  }

  #news-content {
    width: 390px;
    height: 390px;
    margin: 5px;
    word-break: break-all;
    word-wrap: break-word;
  }
</style>

</html>

View Code

news_editor.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>新闻后台</title>
  <script src="./jquery.min.js"></script>
</head>

<body>
  <h1>新闻编辑...</h1>
  <hr>
  <table id="news">
    <th>
    <td style="width: 80px;">所属板块</td>
    <td style="width: 150px;">标题</td>
    <td style="width: 50px;">时间</td>
    <td style="width: 250px;">内容</td>
    <td style="width: 80px;">操作</td>
    </th>
  </table>
  <div class="control-btns">
    <a href="javascript:void(0)" class="add" onclick="editNews()"></a>
  </div>

  <div class="news-editor-wrap none">
    <div class="news-editor">
      <h3
        style="background: rgba(7, 177, 255, 1);margin: 0;height: 50px;line-height: 50px;text-indent: 10px;color: #ccc;">
        新闻编辑</h3>
      <hr style="margin-top: 0;">
      <div>
        <span class="label">标题：</span>
        <input type="text" id="title">
      </div>
      <div>
        <span class="label">时间： </span>
        <input type="text" id="time">
      </div>
      <div>
        <span class="label">所属板块： </span>
        <select id="type">
        </select>
      </div>
      <div>
        <span class="label">内容： </span>
        <textarea id="content" cols="47" rows="16"></textarea>
      </div>
      <div>
        <button id="submit">提交</button>
      </div>
    </div>
  </div>


  <script>
    let refs = {
      tpxw: '图片新闻',
      xsjl: '学术交流',
      xwsd: '新闻速递',
      djdt: '党建动态',
      tzgg: '通知公告',
      ztlb: '专题列表',
    }
    let allNews = [];
    function editNews(index) {
      if (arguments.length < 1) {
        $('#title').val('');
        $('#time').val('');
        $('#content').val('');
        $('.news-editor-wrap').removeClass('none');
      } else if (arguments.length == 1) {
        let newsItem = allNews[index];
        $('#title').val(newsItem.title);
        $('#time').val(newsItem.time);
        $('#content').val(newsItem.content);
        $('#type').val(newsItem.type);
        $('.news-editor-wrap').removeClass('none');
      }
    }
    function deleteNews(index) {
      $.ajax({
        url: '/delete',
        method: 'post',
        data: { index: index },
        success: data => {
          console.log('hello');
          location.reload();
        }
      });
    }
    Object.keys(refs).forEach(key => {
      $('#type').append(`
        <option value="${key}">${refs[key]}</option>
        `);
    });
    $('.news-editor-wrap').on('click', () => $('.news-editor-wrap').addClass('none'));
    $('.news-editor').on('click', ev => ev.stopPropagation());
    $.ajax({
      url: '/getall',
      success: data => {
        allNews = data;
        for (let i = 0, len = data.length; i < len; i++) {
          if (!data[i]) {
            continue;
          }
          $('#news').append(`
                <tr>
                  <td style="width: 20px;">${i + 1}</td>
                  <td>${refs[data[i].type]}</td>
                  <td>${data[i].title}</td>
                  <td>${data[i].time}</td>
                  <td>${data[i].content}</td>
                  <td>
                    <a href="javascript:void(0)" class="edit" onclick="editNews(${i})"></a>
                    <a href="javascript:void(0)" class="delete" onclick="deleteNews(${i})"></a>
                  </td>
                </tr>
            `);
        }

      }
    });

  </script>
  <style>
    .edit {
      display: inline-block;
      background: url('./img/编辑.png');
      background-size: 30px 30px;
      width: 30px;
      height: 30px;
    }

    .delete {
      display: inline-block;
      background: url('./img/删除.png') no-repeat;
      background-size: 20px 20px;
      width: 25px;
      height: 25px;
    }

    .add {
      display: inline-block;
      background: url('./img/添加.png') no-repeat;
      background-size: 20px 20px;
      width: 30px;
      height: 30px;      
    }

    #news {
      margin: auto;
      text-align: center;
    }

    .news-editor-wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(180, 180, 180, .8);
      z-index: 999;
    }

    .news-editor {
      position: fixed;
      border: 1px solid #666;
      background: #fff;
      opacity: 1;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -225px;
      width: 400px;
      height: 450px;
    }

    .label {
      display: inline-block;
      width: 100px;
      text-align: justify;
      text-justify: distribute-all-lines;
      text-align-last: justify;
      text-indent: 5px;
    }

    .control-btns {
      position: fixed;
      text-align: center;
      width: 30px;
      height: 80px;
      right: 50px;
      top: 120px;
    }

    .none {
      display: none;
    }

    input {
      text-decoration: none;
      outline: none;
      border: none;
      text-align: center;
      width: 240px;
      margin: 5px 0 5px;
      border-bottom: 1px solid #444;
    }

    select {
      width: 100px;
      margin: 5px 0 5px;
      border: none;
      background: inherit;
      border-bottom: 1px solid #333;
    }

    tr {
      border-bottom: 2px solid #222;
    }

    td {
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 300px;
    }

    textarea {
      margin-left: 2px;
    }

    #submit {
      position: relative;
      border: none;
      background: rgba(7, 177, 255, 1);
      border-radius: 8px;
      color: #eee;
      left: 50%;
      top: 5px;
      font-size: 15px;
      margin-left: -50px;
      width: 100px;
      height: 30px;
    }

    #submit:hover {
      background: rgba(7, 177, 255, .8);
    }

    td:first-child {
      border-left: none;
    }

    td:last-child {
      border-right: none;
    }
  </style>
</body>

</html>

View Code

posted @ 2019-05-15 19:19 eddy_s 阅读(168) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部