From 394498229f91295daf1f4146a90e904d5d960936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=88=E5=AD=A6=E5=9D=A4?= <1107410514@qq.com>
Date: Wed, 25 Sep 2019 09:34:09 +0800
Subject: [PATCH] kun

---
 src/components/FooterNav.vue      |  64 +++
 src/components/HeaderNav.vue      |  85 ++++
 src/views/project/Application.vue | 761 ++++++++++++++++++++++++++++++
 src/views/project/Project.vue     | 598 +++++++++++++++++++++++
 src/views/project/Schedule.vue    | 595 +++++++++++++++++++++++
 5 files changed, 2103 insertions(+)
 create mode 100644 src/components/FooterNav.vue
 create mode 100644 src/components/HeaderNav.vue
 create mode 100644 src/views/project/Application.vue
 create mode 100644 src/views/project/Project.vue
 create mode 100644 src/views/project/Schedule.vue

diff --git a/src/components/FooterNav.vue b/src/components/FooterNav.vue
new file mode 100644
index 0000000..deae0e6
--- /dev/null
+++ b/src/components/FooterNav.vue
@@ -0,0 +1,64 @@
+<template>
+  <div id="wrapper-w" :style="{'background-image':'url('+imgUrl.foot+')'}">
+    <div>
+      <p>版权所有：朝阳区委社会工委区民政局</p>
+      <p>京ICP备19040879号 Copyright 2019-2029 www.cyteam.orz.cn All Rights Reserved</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data () {
+    return {
+      imgUrl: {
+        foot: require('../../static/img/foot.png')
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created () {},
+  mounted () {}
+}
+</script>
+
+<style lang='scss' scoped>
+#wrapper-w {
+  width: 1280px;
+  height: 227px !important;
+  background-size: 100% 100%;
+  background-color: rgba($color: #000000, $alpha: 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    display: inline-block;
+    height: 64px;
+    text-align: center;
+
+    & > p:first-child {
+      font-family: "MicrosoftYaHei";
+      font-size: 16px;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: -1px;
+      color: #ffffff;
+    }
+
+    & > p:last-child {
+      font-family: "MicrosoftYaHei";
+      font-size: 16px;
+      font-weight: bold;
+      font-stretch: normal;
+      line-height: 60px;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+  }
+}
+</style>
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
new file mode 100644
index 0000000..7ab0dff
--- /dev/null
+++ b/src/components/HeaderNav.vue
@@ -0,0 +1,85 @@
+<template>
+  <div id="wrapper" :style="{'background-image':'url('+imgUrl.home+')'}">
+    <div class="box">
+      <div @click="$jump('homePage')" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
+      <div
+        @click="$jump('informationQuery',{id:1,text:'666'})"
+        :class="styleNum == 1 ? 'style': ''"
+      >社会组织信用信息查询</div>
+      <div @click="$jump('project')" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
+      <div @click="$jump('personalZte')" :class="styleNum == 3 ? 'style': ''">个人中心</div>
+      <div>
+        <span @click="$jump('login')">登录</span> |
+        <span @click="$jump('registered')">注册</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ['index_num'],
+  data () {
+    return {
+      imgUrl: { home: require('../../static/img/home.png') },
+      styleNum: 0
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created () {
+    let sub = this.styleNum
+    sub = this.$props.index_num
+    this.styleNum = sub
+  },
+  mounted () {}
+}
+</script>
+
+<style lang='scss' scoped>
+#wrapper {
+  width: 1280px;
+  height: 389px;
+  box-sizing: border-box;
+  background-size: 100% 100%;
+  position: relative;
+
+  .box {
+    position: absolute;
+    bottom: 0%;
+    left: 0%;
+    width: 1280px;
+    height: 63px;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    & > div {
+      font-family: "MicrosoftYaHei";
+      font-size: 20px;
+      font-weight: bold;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #333333;
+      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+      cursor: pointer;
+    }
+
+    .style {
+      font-family: "MicrosoftYaHei";
+      font-size: 20px;
+      font-weight: bold;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
+      padding: 21px;
+      background-color: #e60012;
+      border-radius: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/views/project/Application.vue b/src/views/project/Application.vue
new file mode 100644
index 0000000..39a606f
--- /dev/null
+++ b/src/views/project/Application.vue
@@ -0,0 +1,761 @@
+<template>
+  <div class="wrapper">
+    <header-nav :index_num="index_num"></header-nav>
+    <div id="box">
+      <h3>项目创建</h3>
+      <!-- 导航 -->
+      <div class="box">
+        <div :class="sub == 0 ? 'color' : ''"
+             :style="{'background-image': sub == 0 ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}">1 填写基本信息</div>
+        <div :class="sub == 1 ? 'color' : ''"
+             :style="{'background-image': sub == 1 ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}">2 填写详细信息</div>
+      </div>
+      <form action
+            onsubmit="return false">
+        <div v-if="sub == 0">
+          <h4>一、基本信息</h4>
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>项目名称:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>项目申报单位:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>项目类型:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>项目落地区域:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>一级项目方向:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>二级项目方向:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>项目服务领域:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>申报单位属性:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>申请日期:</label>
+              <select name
+                      id>
+                <option value>2019-01-31</option>
+                <option value>2019-01-20</option>
+              </select>
+            </div>
+            <div>
+              <label for>截止日期:</label>
+              <select name
+                      id>
+                <option value>2019-01-31</option>
+                <option value>2019-01-20</option>
+              </select>
+            </div>
+          </aside>
+          <!-- end -->
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>通讯地址:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>邮政编码:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>电子信箱:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>传真电话:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>法定代表人:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>法人代码:</label>
+              <input type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <!-- start -->
+          <aside>
+            <div>
+              <label for>负责人姓名:</label>
+              <input class="i"
+                     type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>职务:</label>
+              <input class="i"
+                     type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>办公电话:</label>
+              <input class="i"
+                     type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>手机:</label>
+              <input class="i"
+                     type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <aside>
+            <div>
+              <label for>联系人姓名:</label>
+              <input class="i"
+                     type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>职务:</label>
+              <input class="i"
+                     type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>办公电话:</label>
+              <input class="i"
+                     type="text"
+                     name
+                     id />
+            </div>
+            <div>
+              <label for>手机:</label>
+              <input class="i"
+                     type="text"
+                     name
+                     id />
+            </div>
+          </aside>
+          <!-- end -->
+          <div class="btn"
+               @click="btn(1)">下一步</div>
+        </div>
+        <div v-if="sub == 1">
+          <div class="cc">
+            <!-- start -->
+            <aside>
+              <div>
+                <label for>项目主责单位:</label>
+                <input class="i-i"
+                       type="text"
+                       name
+                       id />
+              </div>
+            </aside>
+            <!-- end -->
+            <!-- start -->
+            <aside>
+              <div>
+                <label for>项目名称:</label>
+                <input type="text"
+                       name
+                       id />
+              </div>
+              <div>
+                <label for>邮政编码:</label>
+                <input type="text"
+                       name
+                       id />
+              </div>
+            </aside>
+            <!-- end -->
+            <!-- start -->
+            <aside>
+              <div>
+                <label for>电子信箱:</label>
+                <input type="text"
+                       name
+                       id />
+              </div>
+              <div>
+                <label for>传真电话:</label>
+                <input type="text"
+                       name
+                       id />
+              </div>
+            </aside>
+            <!-- end -->
+            <!-- start -->
+            <aside>
+              <div>
+                <label for>负责人姓名:</label>
+                <input class="i"
+                       type="text"
+                       name
+                       id />
+              </div>
+              <div>
+                <label for>职务:</label>
+                <input class="i"
+                       type="text"
+                       name
+                       id />
+              </div>
+              <div>
+                <label for>办公电话:</label>
+                <input class="i"
+                       type="text"
+                       name
+                       id />
+              </div>
+              <div>
+                <label for>手机:</label>
+                <input class="i"
+                       type="text"
+                       name
+                       id />
+              </div>
+            </aside>
+            <!-- end -->
+            <aside>
+              <div>
+                <label for>联系人姓名:</label>
+                <input class="i"
+                       type="text"
+                       name
+                       id />
+              </div>
+              <div>
+                <label for>职务:</label>
+                <input class="i"
+                       type="text"
+                       name
+                       id />
+              </div>
+              <div>
+                <label for>办公电话:</label>
+                <input class="i"
+                       type="text"
+                       name
+                       id />
+              </div>
+              <div>
+                <label for>手机:</label>
+                <input class="i"
+                       type="text"
+                       name
+                       id />
+              </div>
+            </aside>
+            <!-- end -->
+          </div>
+          <div>
+            <div class="xx">
+              <h5>二、申报单位简介</h5>
+              <textarea name
+                        id></textarea>
+            </div>
+            <div class="xx">
+              <h5>三、项目简介</h5>
+              <textarea name
+                        id></textarea>
+            </div>
+            <div class="xx">
+              <h5>四、项目论证</h5>
+              <textarea name
+                        id></textarea>
+            </div>
+            <div class="xx">
+              <h5>五、经费预算</h5>
+              <textarea name
+                        id></textarea>
+            </div>
+            <div class="xxx">
+              <h5>六、申报单位承诺</h5>
+              <div class="plpl">
+                <span @click="thf()"
+                      :class="thff ? 'ic' : ''"
+                      class="iconfont icon-fuxuankuang_xuanzhong"></span>
+                <label for>我们确认项目中报内容的真实性,并愿意承担相应的责任</label>
+              </div>
+            </div>
+            <div class="xxx">
+              <h5>七、项目主责单位意见</h5>
+              <div class="btnn">
+                <label id="uploadFile">
+                  上传文件
+                  <input id="uploadFile"
+                         v-show="false"
+                         type="file"
+                         @change="getFile($event)" />
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class="ll">
+            <div>保存</div>
+            <input type="submit"
+                   name="submit"
+                   value="提交" />
+          </div>
+        </div>
+      </form>
+    </div>
+    <footer-nav class="footer"></footer-nav>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import HeaderNav from "../../components/HeaderNav";
+/* eslint-disable */
+import FooterNav from "../../components/FooterNav";
+export default {
+  components: {
+    HeaderNav,
+    FooterNav
+  },
+  props: {},
+  data() {
+    return {
+      index_num: 2,
+      sub: 0,
+      file: "",
+      imgUrl: {
+        bg0: require("../../../static/img/bg0.png"),
+        bg1: require("../../../static/img/bg1.png"),
+        xa: require("../../../static/img/xa.png")
+      },
+      thff: false
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    thf() {
+      this.thff = !this.thff;
+    },
+    btn(index) {
+      let s = this.sub;
+      s = index;
+      this.sub = s;
+    },
+    getFile(event) {
+      this.file = event.target.files[0];
+      console.log(this.file);
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style lang='scss' scoped>
+.wrapper {
+  width: 1280px;
+  box-sizing: border-box;
+
+  #box {
+    margin: 40px auto 0;
+    padding: 34px 32px 100px 28px;
+    box-sizing: border-box;
+    width: 1200px;
+    background-color: #ffffff;
+
+    form {
+      .ll {
+        margin-top: 80px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        div {
+          margin-right: 152px;
+          width: 197px;
+          height: 63px;
+          background-color: #ff9800;
+          border-radius: 5px;
+          font-family: "MicrosoftYaHei";
+          font-size: 26px;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 63px;
+          letter-spacing: 0px;
+          color: #ffffff;
+          text-align: center;
+        }
+
+        input[type="submit"] {
+          width: 197px;
+          height: 63px;
+          background-color: #e60012;
+          border-radius: 5px;
+          font-family: "MicrosoftYaHei";
+          font-size: 26px;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 63px;
+          text-align: center;
+          letter-spacing: 0px;
+          color: #ffffff;
+          outline: none;
+        }
+      }
+
+      .xxx {
+        margin-top: 60px;
+        width: 100%;
+        height: 72px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .plpl {
+          display: flex;
+          align-items: center;
+          label {
+            margin-left: 16px;
+            font-family: "MicrosoftYaHei";
+            font-size: 16px;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 25px;
+            letter-spacing: 0px;
+            color: #323232;
+          }
+
+          .iconfont {
+            font-size: 22px;
+            color: #999;
+          }
+          .ic {
+            color: #e60012;
+          }
+        }
+
+        .btnn {
+          cursor: pointer;
+          width: 96px;
+          height: 32px;
+          background-image: linear-gradient(
+              69deg,
+              #cc263f 0%,
+              #f42b47 100%,
+              #ed162d 100%,
+              #e60012 100%
+            ),
+            linear-gradient(#e60012, #e60012);
+          background-blend-mode: normal, normal;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          label {
+            font-family: "MicrosoftYaHei";
+            font-size: 16px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #ffffff;
+          }
+        }
+      }
+
+      .xx {
+        margin-top: 60px;
+        width: 100%;
+        height: 188px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        textarea {
+          width: 1139px;
+          height: 138px;
+          background-color: #ffffff;
+          border: solid 1px #c7c7c7;
+          resize: none;
+        }
+
+        h5 {
+          width: 100%;
+          font-family: "MicrosoftYaHei";
+          font-size: 20px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #333333;
+        }
+      }
+
+      .cc {
+        width: 1140px;
+        margin: 0 auto 0px;
+        aside {
+          width: 100%;
+          height: 43px;
+          div {
+            display: flex;
+            align-items: center;
+
+            label {
+              display: inline-block;
+              width: 101px;
+              height: 43px;
+              font-family: "MicrosoftYaHei";
+              font-size: 16px;
+              font-weight: normal;
+              font-stretch: normal;
+              line-height: 43px;
+              text-align: right;
+              letter-spacing: 0px;
+              color: #323232;
+            }
+
+            .i-i {
+              width: 1009px;
+              height: 43px;
+              background-color: #ffffff;
+              border: solid 1px #c7c7c7;
+              outline: none;
+              margin-left: 30px;
+              font-family: "MicrosoftYaHei";
+              font-size: 18px;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0px;
+              color: #323232;
+            }
+          }
+        }
+      }
+
+      .btn {
+        margin: 60px auto 0;
+        width: 230px;
+        height: 63px;
+        background-color: #e60012;
+        border-radius: 5px;
+        font-family: "MicrosoftYaHei";
+        font-size: 26px;
+        font-weight: normal;
+        font-stretch: normal;
+        line-height: 63px;
+        letter-spacing: 0px;
+        text-align: center;
+        color: #ffffff;
+      }
+
+      aside {
+        width: 1138px;
+        height: 43px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 25px;
+
+        label {
+          display: inline-block;
+          width: 101px;
+          height: 43px;
+          font-family: "MicrosoftYaHei";
+          font-size: 16px;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 43px;
+          text-align: right;
+          letter-spacing: 0px;
+          color: #323232;
+        }
+
+        select {
+          /* 清除默认的箭头样式 */
+          appearance: none;
+          -moz-appearance: none;
+          -webkit-appearance: none;
+          /* 右侧添加小箭头的背景图 */
+          background: url("../../../static/img/xa.png") 360px center no-repeat;
+          background-size: 14px 8px;
+          width: 386px;
+          height: 43px;
+          background-color: #ffffff;
+          border: solid 1px #c7c7c7;
+          padding-left: 83px;
+          box-sizing: border-box;
+          outline: none;
+          margin-left: 30px;
+          font-family: "MicrosoftYaHei";
+          font-size: 18px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #323232;
+        }
+
+        input {
+          box-sizing: border-box;
+          width: 386px;
+          height: 43px;
+          background-color: #ffffff;
+          border: solid 1px #c7c7c7;
+          outline: none;
+          margin-left: 30px;
+          font-family: "MicrosoftYaHei";
+          font-size: 18px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #323232;
+        }
+
+        .i {
+          width: 151px;
+          height: 43px;
+          background-color: #ffffff;
+          border: solid 1px #c7c7c7;
+          outline: none;
+          margin-left: 30px;
+          font-family: "MicrosoftYaHei";
+          font-size: 18px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #323232;
+        }
+      }
+
+      h4 {
+        width: 1138px;
+        height: 38px;
+        font-family: "MicrosoftYaHei";
+        font-size: 20px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0px;
+        color: #333333;
+        padding-left: 30px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #ccc;
+        margin-bottom: 54px;
+      }
+    }
+
+    .box {
+      width: 395px;
+      height: 34px;
+      margin: 44px auto 70px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      div {
+        width: 192px;
+        height: 34px;
+        background-size: 100% 100%;
+        font-family: "MicrosoftYaHei";
+        font-size: 14px;
+        font-weight: normal;
+        font-stretch: normal;
+        line-height: 34px;
+        text-align: center;
+        letter-spacing: 0px;
+        color: #333333;
+      }
+
+      .color {
+        color: #fff;
+      }
+    }
+
+    h3 {
+      width: 89px;
+      height: 23px;
+      margin: 0 auto;
+      font-family: "MicrosoftYaHei";
+      font-size: 22px;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #333333;
+    }
+  }
+
+  .footer {
+    margin-top: 80px;
+  }
+}
+</style>
diff --git a/src/views/project/Project.vue b/src/views/project/Project.vue
new file mode 100644
index 0000000..114eb1b
--- /dev/null
+++ b/src/views/project/Project.vue
@@ -0,0 +1,598 @@
+<template>
+  <div class="wrapper">
+    <header-nav :index_num="index_num"></header-nav>
+    <div id="box">
+      <!-- 公告 -->
+      <div class="top">
+        <img :src="imgUrl.xlb"
+             alt />
+        <div>
+          <span>世界婚博会已通过初审</span>
+          <time>[2019-07-31]</time>
+        </div>
+      </div>
+      <div class="bottom">
+        <!-- 表格 -->
+        <div class="table">
+          <div class="top-p">项目概览</div>
+          <div class="top-b">
+            <div>
+              <section>
+                <span>初筛通过</span>
+                <span>10</span>
+              </section>
+            </div>
+            <div>
+              <section>
+                <span>立项通过</span>
+                <span>10</span>
+              </section>
+            </div>
+            <div>
+              <section>
+                <span>执行中</span>
+                <span>10</span>
+              </section>
+            </div>
+            <div>
+              <section>
+                <span>已完结</span>
+                <span>10</span>
+              </section>
+            </div>
+          </div>
+        </div>
+        <!-- 下拉框 -->
+        <div class="select">
+          <select class="one"
+                  name="date">
+            <option value>2017/10/14 至 2017/10/15</option>
+            <option value>2017/10/14 至 2017/10/15</option>
+          </select>
+          <select class="two"
+                  name="type">
+            <option value>类型1</option>
+            <option value>类型2</option>
+          </select>
+          <select class="three"
+                  name="area">
+            <option value>区域1</option>
+            <option value>区域2</option>
+          </select>
+          <span @click="$jump('application')">项目申报</span>
+        </div>
+        <!-- container -->
+        <div class="con">
+          <!-- 导航 -->
+          <div class="top-t">
+            <h3 @click="btn(index)"
+                v-for="(item,index) in text"
+                :key="index"
+                :class="sub == index ? 'style' : ''">{{item}}</h3>
+          </div>
+          <!-- 主题内容 -->
+          <div class="cc">
+            <template v-for="(item,index) in sData">
+              <div class="list"
+                   :key="index"
+                   v-if="index < 9"
+                   @click="$jump('schedule')">
+                <div class="div">
+                  <div class="bb">
+                    <h3>世界婚博会</h3>
+                    <h5>活动</h5>
+                  </div>
+                  <time>2019-07-19</time>
+                </div>
+                <dl>
+                  <dt>
+                    <img :src="imgUrl.tg"
+                         v-if="item.state == 0" />
+                    <img :src="imgUrl.btg"
+                         v-if="item.state == 1" />
+                    <img :src="imgUrl.shz"
+                         v-if="item.state == 2" />
+                    <img :src="imgUrl.zxz"
+                         v-if="item.state == 3" />
+                  </dt>
+                  <dd>
+                    <span class="iconfont icon-zuzhijiegou"></span>
+                    <span>朝阳社会组织</span>
+                  </dd>
+                  <dd>
+                    <span class="iconfont icon-weizhi"></span>
+                    <span>北京市朝阳区建外街道</span>
+                  </dd>
+                  <dd>
+                    <span class="iconfont icon-shenhetongguo1"></span>
+                    <span>当前申报阶段：立项审核中</span>
+                  </dd>
+                </dl>
+              </div>
+            </template>
+          </div>
+        </div>
+        <!-- 分页按钮 -->
+        <div class="page">
+          <el-pagination @size-change="handleSizeChange"
+                         @current-change="handleCurrentChange"
+                         :current-page="currentPage"
+                         :page-size="pageSize"
+                         background
+                         layout="prev, pager, next"
+                         :total="10"></el-pagination>
+        </div>
+      </div>
+    </div>
+    <footer-nav class="footer"></footer-nav>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import HeaderNav from "../../components/HeaderNav";
+/* eslint-disable */
+import FooterNav from "../../components/FooterNav";
+export default {
+  components: {
+    HeaderNav,
+    FooterNav
+  },
+  props: {},
+  data() {
+    return {
+      index_num: 2,
+      pageSize: 1,
+      currentPage: 1,
+      totalCount: 1,
+      imgUrl: {
+        xlb: require("../../../static/img/xlb.png"),
+        tg: require("../../../static/img/tg.png"),
+        btg: require("../../../static/img/btg.png"),
+        shz: require("../../../static/img/shz.png"),
+        zxz: require("../../../static/img/zxz.png")
+      },
+      text: ["全部", "项目初筛", "项目立项"],
+      sub: 0,
+      sData: [
+        { state: 0 },
+        { state: 0 },
+        { state: 0 },
+        { state: 1 },
+        { state: 1 },
+        { state: 2 },
+        { state: 3 },
+        { state: 3 },
+        { state: 2 },
+        { state: 0 }
+      ]
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    btn(index) {
+      let s = this.sub;
+      s = index;
+      this.sub = s;
+    },
+    handleSizeChange(val) {
+      this.pageNum = val;
+      this.getPackData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getPackData();
+    },
+    getPackData() {}
+  },
+  created() {
+    this.currentPage = Number(localStorage.getItem("pagination")) || 1;
+    this.handleCurrentChange(this.currentPage);
+  },
+  mounted() {}
+};
+</script>
+
+<style lang='scss' scoped>
+.wrapper {
+  width: 1280px;
+  box-sizing: border-box;
+
+  .footer {
+    margin-top: 80px;
+  }
+
+  #box {
+    margin: 0 auto;
+    width: 1200px;
+    box-sizing: border-box;
+
+    .bottom {
+      padding: 35px 30px 0px;
+      box-sizing: border-box;
+      width: 1200px;
+      height: 1320px;
+      background-color: #ffffff;
+
+      .page {
+        margin-top: 60px;
+        height: 36px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        /deep/ .el-pagination.is-background .el-pager li {
+          color: #333 !important;
+        }
+
+        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+          background-color: #e60012;
+          color: #fff !important;
+        }
+
+        /deep/ .el-icon.el-icon-arrow-left::before {
+          content: "上一页";
+          font-family: "MicrosoftYaHei";
+          font-size: 12px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 1px;
+          color: #666;
+        }
+
+        /deep/ .el-pagination .btn-prev {
+          width: 80px;
+        }
+
+        /deep/ .el-pagination .btn-next {
+          width: 80px;
+        }
+
+        /deep/ .el-icon.el-icon-arrow-right::before {
+          content: "下一页";
+          font-family: "MicrosoftYaHei";
+          font-size: 12px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 1px;
+          color: #666;
+        }
+      }
+
+      .con {
+        width: 1140px;
+        height: 773px;
+
+        .cc {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          align-items: flex-start;
+
+          .list {
+            margin-bottom: 60px;
+            width: 367px;
+            height: 184px;
+            background-color: #ffffff;
+            box-shadow: 0px 19px 21px 3px rgba(145, 142, 142, 0.1);
+            border-radius: 10px;
+            padding: 19px 29px 0px 16px;
+            box-sizing: border-box;
+
+            dl {
+              width: 100%;
+              height: 97px;
+              margin-top: 25px;
+              position: relative;
+
+              dd {
+                margin-bottom: 22px;
+                .iconfont {
+                  font-size: 17px;
+                  color: #ccc;
+                  margin-right: 16px;
+                }
+                span {
+                  font-family: "MicrosoftYaHei";
+                  font-size: 14px;
+                  font-weight: normal;
+                  font-stretch: normal;
+                  letter-spacing: 0px;
+                  color: #666666;
+                }
+              }
+
+              dt {
+                img {
+                  position: absolute;
+                  right: -8.5%;
+                  bottom: -26%;
+                  width: 119px;
+                  height: 95px;
+                }
+              }
+            }
+
+            .div {
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              time {
+                font-family: "MicrosoftYaHei";
+                font-size: 14px;
+                font-weight: normal;
+                font-stretch: normal;
+                letter-spacing: 0px;
+                color: #999999;
+              }
+              .bb {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                h5 {
+                  margin-left: 6px;
+                  height: 18px;
+                  color: #f6ad35;
+                  text-align: center;
+                  line-height: 18px;
+                  border: 1px solid #f6ad35;
+                  border-radius: 4px;
+                  font-size: 12px;
+                }
+                h3 {
+                  font-family: "MicrosoftYaHei";
+                  font-size: 16px;
+                  font-weight: normal;
+                  font-stretch: normal;
+                  letter-spacing: 0px;
+                  color: #333333;
+                }
+              }
+            }
+          }
+        }
+
+        .top-t {
+          width: 1140px;
+          height: 38px;
+          padding-left: 12px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          border-bottom: 1px solid #ccc;
+          margin-bottom: 60px;
+
+          h3 {
+            text-align: center;
+            margin-right: 78px;
+            width: 90px;
+            font-family: "MicrosoftYaHei";
+            font-size: 20px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #333;
+          }
+
+          .style {
+            color: #e60012;
+            position: relative;
+            &::after {
+              content: "";
+              width: 91px;
+              height: 2px;
+              background-image: linear-gradient(#e60012, #e60012),
+                linear-gradient(#ff7f7f, #ff7f7f);
+              background-blend-mode: normal, normal;
+              position: absolute;
+              left: 0%;
+              bottom: -94%;
+            }
+          }
+        }
+      }
+
+      .select {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 50px;
+        margin-bottom: 50px;
+
+        .one {
+          padding-left: 30px;
+          box-sizing: border-box;
+          /* 清除默认的箭头样式 */
+          appearance: none;
+          -moz-appearance: none;
+          -webkit-appearance: none;
+          /* 右侧添加小箭头的背景图 */
+          background: url("../../../static/img/xa.png") 280px center no-repeat;
+          background-size: 14px 8px;
+          width: 325px;
+          height: 38px;
+          background-color: #f9f8f8;
+          border-radius: 4px;
+          border: solid 1px #c7c7c7;
+          outline: none;
+          font-size: 18px;
+          color: #666;
+        }
+
+        .two {
+          padding-left: 30px;
+          box-sizing: border-box;
+          /* 清除默认的箭头样式 */
+          appearance: none;
+          -moz-appearance: none;
+          -webkit-appearance: none;
+          /* 右侧添加小箭头的背景图 */
+          background: url("../../../static/img/xa.png") 90px center no-repeat;
+          background-size: 14px 8px;
+          width: 134px;
+          height: 38px;
+          background-color: #f9f8f8;
+          border-radius: 4px;
+          border: solid 1px #c7c7c7;
+          outline: none;
+          font-size: 18px;
+          color: #666;
+        }
+
+        .three {
+          padding-left: 30px;
+          box-sizing: border-box;
+          /* 清除默认的箭头样式 */
+          appearance: none;
+          -moz-appearance: none;
+          -webkit-appearance: none;
+          /* 右侧添加小箭头的背景图 */
+          background: url("../../../static/img/xa.png") 90px center no-repeat;
+          background-size: 14px 8px;
+          width: 134px;
+          height: 38px;
+          background-color: #f9f8f8;
+          border-radius: 4px;
+          border: solid 1px #c7c7c7;
+          outline: none;
+          font-size: 18px;
+          color: #666;
+        }
+        span {
+          display: inline-block;
+          text-align: center;
+          line-height: 32px;
+          width: 96px;
+          height: 32px;
+          background-image: linear-gradient(
+              69deg,
+              #cc263f 0%,
+              #f42b47 100%,
+              #ed162d 100%,
+              #e60012 100%
+            ),
+            linear-gradient(#e60012, #e60012);
+          background-blend-mode: normal, normal;
+          border-radius: 4px;
+          font-family: "MicrosoftYaHei";
+          font-size: 16px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #ffffff;
+        }
+      }
+
+      .table {
+        width: 1137px;
+        height: 181px;
+        border: solid 1px #dadada;
+        background-color: #f6f6f6;
+        box-sizing: border-box;
+
+        .top-b {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          div {
+            width: 283px;
+            height: 139px;
+            background-color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            section {
+              width: 72px;
+              height: 67px;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              align-items: center;
+
+              span:first-child {
+                font-family: "MicrosoftYaHei";
+                font-size: 18px;
+                font-weight: normal;
+                font-stretch: normal;
+                letter-spacing: 0px;
+                color: #666666;
+              }
+
+              span:last-child {
+                font-family: "MicrosoftYaHei";
+                font-size: 24px;
+                font-weight: bold;
+                font-stretch: normal;
+                letter-spacing: 0px;
+                color: #e60012;
+              }
+            }
+          }
+        }
+
+        .top-p {
+          font-family: "MicrosoftYaHei";
+          font-size: 18px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #333333;
+          width: 1136px;
+          height: 40px;
+          background-color: #f6f6f6;
+          text-align: center;
+          line-height: 40px;
+          border-bottom: 1px solid #dadada;
+          border-right: 1px solid #dadada;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    .top {
+      width: 732px;
+      height: 40px;
+      margin: 30px 0 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      img {
+        width: 33px;
+        height: 27px;
+      }
+      div {
+        width: 672px;
+        height: 21px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        span {
+          font-family: "MicrosoftYaHei";
+          font-size: 20px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #666666;
+        }
+
+        time {
+          font-family: "MicrosoftYaHei";
+          font-size: 20px;
+          font-weight: normal;
+          letter-spacing: 0px;
+          color: #999999;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/project/Schedule.vue b/src/views/project/Schedule.vue
new file mode 100644
index 0000000..9c8547d
--- /dev/null
+++ b/src/views/project/Schedule.vue
@@ -0,0 +1,595 @@
+<template>
+  <div class="wrapper">
+    <header-nav :index_num="index_num"></header-nav>
+    <div id="box">
+      <!-- 导航 -->
+      <div class="top">
+        <div class="span">
+          <span @click="btn(0)"
+                :class="sub == 0 ? 'style' : ''">项目进度</span>
+          <span @click="btn(1)"
+                :class="sub == 1 ? 'style' : ''">项目信息</span>
+        </div>
+        <div class="daochu"
+             v-if="sub == 1">项目导出</div>
+      </div>
+      <!-- 进度 -->
+      <div class="img"
+           v-if="sub == 0">
+        <img :src="imgUrl.tg"
+             v-if="state == 0" />
+        <img :src="imgUrl.btg"
+             v-if="state == 1" />
+        <img :src="imgUrl.shz"
+             v-if="state == 2" />
+        <img :src="imgUrl.zxz"
+             v-if="state == 3" />
+      </div>
+      <!-- 项目流程 -->
+      <div class="bobb"
+           v-if="sub == 0">
+        <div class="left">
+          <div class="time">
+            <span>2019-09-01</span>
+            <span>2019-09-01</span>
+            <span>2019-09-01</span>
+            <span>2019-09-01</span>
+            <span>2019-09-01</span>
+          </div>
+          <div class="jdt">
+            <!-- 已申报 -->
+            <img class="sx0"
+                 :src="imgUrl.sx0"
+                 alt />
+            <img class="d0"
+                 :src="imgUrl.d0"
+                 v-if="zt != 0" />
+            <img class="d1"
+                 :src="imgUrl.d1"
+                 v-if="zt == 0" />
+            <!-- 审核中 -->
+            <img class="sx1"
+                 :src="imgUrl.sx1"
+                 alt />
+            <img class="d0"
+                 :src="imgUrl.d0"
+                 v-if="zt != 1" />
+            <img class="d1"
+                 :src="imgUrl.d1"
+                 v-if="zt == 1" />
+            <!-- 审核通过 -->
+            <img class="sx1"
+                 :src="imgUrl.sx1"
+                 alt />
+            <img class="d0"
+                 :src="imgUrl.d0"
+                 v-if="zt != 2" />
+            <img class="d1"
+                 :src="imgUrl.d1"
+                 v-if="zt == 2" />
+            <!-- 评审中 -->
+            <img class="sx1"
+                 :src="imgUrl.sx1"
+                 alt />
+            <img class="d0"
+                 :src="imgUrl.d0"
+                 v-if="zt != 3" />
+            <img class="d1"
+                 :src="imgUrl.d1"
+                 v-if="zt == 3" />
+            <!-- 评审通过 -->
+            <img class="sx1"
+                 :src="imgUrl.sx1"
+                 alt />
+            <img class="d0"
+                 :src="imgUrl.d0"
+                 v-if="zt != 4" />
+            <img class="d1"
+                 :src="imgUrl.d1"
+                 v-if="zt == 4" />
+            <!-- end -->
+            <img class="sx1"
+                 :src="imgUrl.sx1"
+                 alt />
+          </div>
+          <div class="bb">
+            <div class="o">
+              <span>项目已申报</span>
+              <img class="oo"
+                   :src="imgUrl.d0"
+                   alt />
+            </div>
+            <div>
+              <span>初筛审核中</span>
+              <img class="oo"
+                   :src="imgUrl.d0"
+                   alt />
+            </div>
+            <div class="div-v">
+              <span>初筛审核通过</span>
+              <img class="oo"
+                   :src="imgUrl.d0"
+                   alt />
+              <section>
+                <span style="color:#e60012;font-size:20px;">总分: 71分</span>
+                <span style="color:#999;font-size:16px;">（及格分数: 70）</span>
+              </section>
+            </div>
+            <div>
+              <span>立项评审中</span>
+              <img class="oo"
+                   :src="imgUrl.d0"
+                   alt />
+            </div>
+            <div>
+              <span>立项评审通过</span>
+              <img class="oo"
+                   :src="imgUrl.d0"
+                   alt />
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <p>项目流程说明</p>
+          <ul>
+            <li v-for="(list,index) in text"
+                :key="index">{{list}}</li>
+          </ul>
+        </div>
+      </div>
+      <!-- 项目信息 -->
+      <div class="boxx"
+           v-if="sub == 1">
+        <h3>一、基本信息</h3>
+        <div class="one-o">
+          <ul v-for="(item,index) in arr"
+              :key="index">
+            <template v-for="(item,index) in text1">
+              <li :key="index">{{item}}</li>
+            </template>
+          </ul>
+        </div>
+        <h3>二、申报单位简介:</h3>
+        <div class="one-e">
+          <p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
+        </div>
+        <h3>三、项目简介</h3>
+        <div class="one-e">
+          <p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
+        </div>
+        <h3>四、项目论证</h3>
+        <div class="one-e">
+          <p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
+        </div>
+        <h3>五、经费预算:</h3>
+        <div class="one-e">
+          <p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
+        </div>
+        <h3>六、申报单位承诺:</h3>
+        <div class="one-e">
+          <p>我们确认项目中报内容的真实性,并愿意承担相应的责任</p>
+        </div>
+        <h3>七、项目主责单位意见 :</h3>
+        <div class="one-e">
+          <p>
+            <span>
+              <span>下载</span>
+              &nbsp;|&nbsp;
+              <span>预览</span>
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <footer-nav class="footer"></footer-nav>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import HeaderNav from "../../components/HeaderNav";
+/* eslint-disable */
+import FooterNav from "../../components/FooterNav";
+
+export default {
+  components: {
+    HeaderNav,
+    FooterNav
+  },
+  props: {},
+  data() {
+    return {
+      index_num: 2,
+      sub: 0,
+      imgUrl: {
+        tg: require("../../../static/img/tg.png"),
+        btg: require("../../../static/img/btg.png"),
+        shz: require("../../../static/img/shz.png"),
+        zxz: require("../../../static/img/zxz.png"),
+        sx0: require("../../../static/img/sx0.png"),
+        sx1: require("../../../static/img/sx1.png"),
+        d0: require("../../../static/img/d0.png"),
+        d1: require("../../../static/img/d1.png")
+      },
+      state: 0,
+      zt: 2,
+      arr: [1, 2, 3],
+      text: [
+        "第一步：填写并提交项目申报书",
+        "第二步：线上初筛审核",
+        "第三步：项目初筛结果查询",
+        "第四步：线下立项评审",
+        "第五步：立项结果查询"
+      ],
+      text1: [
+        "项目名称：世界婚会",
+        "项目申报单位：劳动社会组织",
+        "项目类型：活动",
+        "项目落地区域：北区",
+        "一级项目方向：婚礼",
+        "一级项目方向：婚礼",
+        "项目服务领域：北区",
+        "项目有效期：2019-09-02至2019-09-23",
+        "申报单位属性：国企",
+        "通讯地址：北京市海涟区",
+        "电子信箱：15901401996@qq.com",
+        "传真电话：81223221",
+        "邮政编码：100000"
+      ]
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    btn(index) {
+      let s = this.sub;
+      s = index;
+      this.sub = s;
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+
+<style lang='scss' scoped>
+.wrapper {
+  width: 1280px;
+  box-sizing: border-box;
+
+  #box {
+    margin: 40px auto 0;
+    width: 1200px;
+    background-color: #ffffff;
+    padding: 35px 30px 100px;
+    box-sizing: border-box;
+    position: relative;
+
+    .boxx {
+      margin-top: 68px;
+      width: 100%;
+      box-sizing: border-box;
+
+      .one-e {
+        width: 100%;
+        margin-top: 27px;
+        margin-bottom: 60px;
+
+        p {
+          font-family: "MicrosoftYaHei";
+          font-size: 18px;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 39px;
+          letter-spacing: 0px;
+          color: #666666;
+        }
+
+        span {
+          font-family: "MicrosoftYaHei";
+          font-size: 18px;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 39px;
+          letter-spacing: 0px;
+          color: #7471ef;
+        }
+      }
+
+      .one-o {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 30px;
+        margin-bottom: 60px;
+
+        ul {
+          width: 350px;
+          height: 674px;
+          box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
+          border-radius: 5px;
+          padding: 30px 0 0 20px;
+          box-sizing: border-box;
+
+          li {
+            font-family: "MicrosoftYaHei";
+            font-size: 18px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            margin-bottom: 28px;
+            color: #333333;
+          }
+        }
+      }
+      h3 {
+        font-family: "MicrosoftYaHei";
+        font-size: 20px;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0px;
+        color: #333333;
+      }
+    }
+
+    .bobb {
+      margin-top: 110px;
+      width: 100%;
+      height: 974px;
+      padding: 0 40px 0 11px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .left {
+        width: 419px;
+        height: 974px;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: flex-start;
+
+        .time {
+          width: 120px;
+          height: 734px;
+          display: flex;
+          justify-content: space-between;
+          flex-direction: column;
+          align-items: flex-end;
+          margin-top: 72px;
+
+          .span {
+            display: inline-block;
+            width: 119px;
+            height: 18px;
+            font-family: "MicrosoftYaHei";
+            font-size: 22px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #333333;
+          }
+        }
+
+        .jdt {
+          width: 32px;
+          height: 974px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+
+          .sx0 {
+            width: 3px;
+            height: 79px;
+          }
+
+          .sx1 {
+            width: 3px;
+            height: 153px;
+          }
+
+          .wzx {
+            width: 20px;
+            height: 21px;
+          }
+
+          .zx {
+            width: 20px;
+            height: 21px;
+          }
+        }
+
+        .bb {
+          margin-top: 70px;
+          width: 180px;
+          height: 750px;
+          display: flex;
+          justify-content: space-between;
+          flex-direction: column;
+          align-items: flex-start;
+
+          .o {
+            padding-left: 5px;
+            box-sizing: border-box;
+            width: 170px;
+            height: 36px;
+            position: relative;
+            border-bottom: 2px solid #b0c3cd;
+
+            img {
+              width: 10px;
+              height: 10px;
+              position: absolute;
+              right: 0%;
+              bottom: -16%;
+            }
+          }
+
+          div {
+            padding-left: 5px;
+            box-sizing: border-box;
+            width: 100%;
+            height: 36px;
+            position: relative;
+            border-bottom: 2px solid #b0c3cd;
+
+            img {
+              width: 10px;
+              height: 10px;
+              position: absolute;
+              right: 0%;
+              bottom: -16%;
+            }
+
+            section {
+              display: flex;
+              justify-content: space-between;
+              align-items: flex-start;
+              width: 132%;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0px;
+              font-family: "MicrosoftYaHei";
+              position: absolute;
+              left: -8%;
+              bottom: -100%;
+              white-space: nowrap;
+            }
+          }
+
+          span {
+            display: inline-block;
+            width: 135px;
+            height: 22px;
+            text-align: center;
+            line-height: 22px;
+            font-family: "MicrosoftYaHei";
+            font-size: 22px;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #333333;
+          }
+        }
+      }
+
+      .right {
+        padding: 35px 30px;
+        box-sizing: border-box;
+        width: 535px;
+        height: 698px;
+        box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
+        border-radius: 10px;
+
+        ul {
+          margin-top: 48px;
+
+          li {
+            font-family: "MicrosoftYaHei";
+            font-size: 18px;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 48px;
+            letter-spacing: 0px;
+            color: #666666;
+          }
+        }
+
+        p {
+          text-align: center;
+          width: 100%;
+          font-family: "MicrosoftYaHei";
+          font-size: 24px;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 31px;
+          letter-spacing: 0px;
+          color: #333333;
+        }
+      }
+    }
+
+    .img {
+      width: 119px;
+      height: 95px;
+      position: absolute;
+      right: 0%;
+      top: 1%;
+      img {
+        width: 119px;
+        height: 95px;
+      }
+    }
+
+    .top {
+      width: 1140px;
+      height: 38px;
+      border-bottom: 1px solid #ccc;
+      padding-left: 12px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .daochu {
+        width: 96px;
+        height: 32px;
+        background-image: linear-gradient(
+            69deg,
+            #cc263f 0%,
+            #f42b47 100%,
+            #ed162d 100%,
+            #e60012 100%
+          ),
+          linear-gradient(#e60012, #e60012);
+        background-blend-mode: normal, normal;
+        border-radius: 4px;
+        font-family: "MicrosoftYaHei";
+        font-size: 16px;
+        font-weight: normal;
+        font-stretch: normal;
+        line-height: 32px;
+        text-align: center;
+        letter-spacing: 0px;
+        color: #ffffff;
+      }
+
+      .span {
+        span {
+          margin-right: 40px;
+          display: inline-block;
+          width: 120px;
+          height: 38px;
+          text-align: center;
+          font-family: "MicrosoftYaHei";
+          font-size: 20px;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0px;
+          color: #333333;
+        }
+
+        .style {
+          color: #e60012;
+          position: relative;
+          &::after {
+            content: "";
+            width: 120px;
+            height: 2px;
+            background-color: #e60012;
+            position: absolute;
+            bottom: 0%;
+            left: 0%;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    margin-top: 80px;
+  }
+}
+</style>