新版本登录页面

src/dashoo.cn/frontend_web/src/pages/login.vue

@@ -13,152 +13,21 @@
             <el-button type="text" round>没有账户？请注册</el-button>
           </router-link>
 
-          <el-button type="info" size="small" round @click="activeIndex=0">登录供方管理系统</el-button>
+          <el-button type="info" size="small" round @click="activeIndex=0">登录市场管理信息系统</el-button>
         </div>
       </div>
     </sticky>
 
-    <!--<div class="back-width1" style="margin-top: 10px" v-if="activeIndex==0">
-      <el-carousel>
-        <el-carousel-item key="1">
-          <img src="../assets/img/carousel/a.jpg" style="height: 100%; width: 100%">
-        </el-carousel-item>
-        <el-carousel-item key="2">
-          <img src="../assets/img/carousel/b.jpg" style="height: 100%; width: 100%">
-        </el-carousel-item>
-        <el-carousel-item key="3">
-          <img src="../assets/img/carousel/c.jpg" style="height: 100%; width: 100%">
-        </el-carousel-item>
-      </el-carousel>
-    </div>
-
-    <div class="components-container home-wrapper" v-if="activeIndex==0">
-      <el-row>
-        <el-col :span="24">
-          <span style="color: black; font-size: large; font-weight: bold; padding-top: 20px">| 功能介绍</span>
-        </el-col>
-        <el-col :span="24">
-          <span style="color: black; font-size: x-small; padding-top: 20px">| 大港油田供方管理信息系统功能介绍</span>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20" style="margin-top: 0px">
-        <el-col :span="12">
-          <el-card :body-style="{ padding: '0px' }" style="margin-top: 0px">
-            <img style="height: 200px" src="../assets/img/zhunrushenqing.jpg" class="image">
-            <div style="padding: 14px;">
-              <span style="font-weight: bold">准入申请</span>
-              <div class="bottom clearfix">
-                <span>物资类、技术服务类和基建类的准入申请</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card :body-style="{ padding: '0px' }"  style="margin-top: 0px">
-            <img style="height: 200px" src="../assets/img/zengxiangshenqing.jpg" class="image">
-            <div style="padding: 14px;">
-              <span style="font-weight: bold">增项申请</span>
-              <div class="bottom clearfix">
-                <span>物资类、技术服务类和基建类的增项申请</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card :body-style="{ padding: '0px' }">
-            <img style="height: 200px" src="../assets/img/nianshen.jpg" class="image">
-            <div style="padding: 14px;">
-              <span style="font-weight: bold">年审</span>
-              <div class="bottom clearfix">
-                <span>物资类、技术服务类和基建类的年审</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card :body-style="{ padding: '0px' }" >
-            <img style="height: 200px" src="../assets/img/zizhibiangeng.jpg" class="image">
-            <div style="padding: 14px;">
-              <span style="font-weight: bold">资质变更</span>
-              <div class="bottom clearfix">
-                <span>已入网企业的资质变更</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card :body-style="{ padding: '0px' }" >
-            <img style="height: 200px" src="../assets/img/xinxibiangeng.jpg" class="image">
-            <div style="padding: 14px;">
-              <span style="font-weight: bold">信息变更</span>
-              <div class="bottom clearfix">
-                <span>已入网企业的信息变更</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card :body-style="{ padding: '0px' }" >
-            <img style="height: 200px" src="../assets/img/zaixianjiaofei.jpg" class="image">
-            <div style="padding: 14px;">
-              <span style="font-weight: bold">在线缴费</span>
-              <div class="bottom clearfix">
-                <span>通过此信息可在线缴费</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
-            <img style="height: 200px" src="../assets/img/zaixianchaxun.jpg" class="image">
-            <div style="padding: 14px;">
-              <span style="font-weight: bold">业务查询</span>
-              <div class="bottom clearfix">
-                <span>报表及图表的查询功能</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
-            <img style="height: 200px" src="../assets/img/zizhi.jpg" class="image">
-            <div style="padding: 14px;">
-              <span style="font-weight: bold">资质管理</span>
-              <div class="bottom clearfix">
-                <span>资质管理的统一管理功能</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>-->
-
-    <div style="background-color: white">
-      <div class="top-wrapper">
-        <img
-          src="../assets/img/title_gongfang.png"
-          style="height:60px; margin-top: 5px;"
-          v-if="activeIndex==0"
-        >
-        <el-menu :default-active="activeIndex" @select="handleSelect" mode="horizontal">
-          <el-menu-item index="0">
-            <i class="el-icon-tickets"></i>
-            <span>登录</span>
-          </el-menu-item>
-          <el-menu-item index="1">
-            <i class="el-icon-bell"></i>
-            <span>通知中心</span>
-          </el-menu-item>
-          <el-menu-item index="2">
-            <i class="el-icon-document"></i>
-            <span>文件下载中心</span>
-          </el-menu-item>
-        </el-menu>
-      </div>
-
-      <div style="background-color: white;" v-if="activeIndex==0">
+    <div style="background-color: #3273FC" v-if="activeIndex==0">
+      <div style="background-color: white;">
         <div class="back-width">
+
           <div class="login-body">
+            <img
+              src="../assets/img/title_gongfang.png"
+              style=" position: absolute; height:60px; top: 20px; left:50%; margin-left: -350px"
+              v-if="activeIndex==0"
+            />
             <section class="login">
               <!--<header class="login-header">
                 <h1 style="text-align:center;margin-top:70px;margin-bottom:40px;"><router-link to="/"><img src="../assets/img/logo.png" style="height:80px;"></router-link></h1>
@@ -169,64 +38,91 @@
                 <!--<div slot="header" class="clearfix">
                   <span style="font-weight: bold;">用户登录</span>
                 </div>-->
-                <el-form
-                  class="login-form"
-                  auto-complete="off"
-                  :model="model"
-                  :rules="rules"
-                  ref="user"
-                  label-position="top"
-                >
-                  <el-form-item label="用户名" prop="username">
-                    <el-input type="text" v-model="model.username" placeholder="请输入用户名">
-                      <el-select
-                        v-model="loginMode"
-                        slot="append"
-                        placeholder="登录类型"
-                        style="width: 110px;"
-                      >
-                        <el-option label="PTR认证" :value="2"></el-option>
-                        <el-option label="普通账户" :value="1"></el-option>
-                      </el-select>
-                    </el-input>
-                  </el-form-item>
-                  <el-form-item label="密码" prop="password">
-                    <el-input
-                      type="password"
-                      v-model="model.password"
-                      placeholder="请输入密码"
-                      @keyup.enter.native="loginall()"
-                    />
-                  </el-form-item>
-                  <el-button
-                    type="primary"
-                    :loading="loading"
-                    @click="loginall()"
-                  >{{ loading ? '登录中...' : '登录' }}</el-button>
-                  <el-row>
-                    <el-col :span="12">
-                      <router-link :to="'/signup'">
-                        <el-button type="text" round>没有账户？请注册</el-button>
-                      </router-link>
-                    </el-col>
-                    <el-col :span="12">
-                      <router-link :to="'/passwordback'">
-                        <el-button type="text" round>忘记密码？</el-button>
-                      </router-link>
-                    </el-col>
-                  </el-row>
-                </el-form>
+                <el-menu :default-active="activeIndex" @select="handleSelect" mode="horizontal">
+                  <el-menu-item index="0">
+                    <i class="el-icon-tickets"></i>
+                    <span>登录</span>
+                  </el-menu-item>
+                  <el-menu-item index="1">
+                    <i class="el-icon-bell"></i>
+                    <span>通知中心</span>
+                  </el-menu-item>
+                  <el-menu-item index="2">
+                    <i class="el-icon-document"></i>
+                    <span>文件下载中心</span>
+                  </el-menu-item>
+                </el-menu>
+                <el-row>
+                  <el-col :span="12">
+                    <div class="demo-image__placeholder">
+                      <div class="block">
+                        <img style="width: 290px; height: 280px; margin-top: 10px" src="../assets/img/login_left.png" />
+                      </div>
+                    </div>
+                   <!-- -->
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form
+                      class="login-form"
+                      auto-complete="off"
+                      :model="model"
+                      :rules="rules"
+                      ref="user"
+                      label-position="top"
+                    >
+                      <el-form-item label="用户名" prop="username">
+                        <el-input type="text" v-model="model.username" placeholder="请输入用户名">
+                          <el-select
+                            v-model="loginMode"
+                            slot="append"
+                            placeholder="登录类型"
+                            style="width: 110px;"
+                          >
+                            <el-option label="PTR认证" :value="2"></el-option>
+                            <el-option label="普通账户" :value="1"></el-option>
+                          </el-select>
+                        </el-input>
+                      </el-form-item>
+                      <el-form-item label="密码" prop="password">
+                        <el-input
+                          type="password"
+                          v-model="model.password"
+                          placeholder="请输入密码"
+                          @keyup.enter.native="loginall()"
+                        />
+                      </el-form-item>
+                      <el-button
+                        type="primary"
+                        :loading="loading"
+                        @click="loginall()"
+                      >{{ loading ? '登录中...' : '登录' }}</el-button>
+                      <el-row>
+                        <el-col :span="12">
+                          <router-link :to="'/signup'">
+                            <el-button type="text" round>没有账户？请注册</el-button>
+                          </router-link>
+                        </el-col>
+                        <el-col :span="12">
+                          <router-link :to="'/passwordback'">
+                            <el-button type="text" round>忘记密码？</el-button>
+                          </router-link>
+                        </el-col>
+                      </el-row>
+                    </el-form>
+                  </el-col>
+                </el-row>
+
               </el-card>
             </section>
           </div>
         </div>
       </div>
+    </div>
 
+    <div v-if="activeIndex==1">
       <div
         class="components-container home-wrapper"
-        style="background-color: white;"
-        v-if="activeIndex==1"
-      >
+        style="background-color: white;">
         <el-table
           :data="noticeList"
           height="50%"
@@ -243,12 +139,12 @@
           </el-table-column>
         </el-table>
       </div>
+    </div>
 
+    <div v-if="activeIndex==2">
       <div
         class="components-container home-wrapper"
-        style="background-color: white"
-        v-if="activeIndex==2"
-      >
+        style="background-color: white">
         <el-table
           :data="fileList"
           height="50%"
@@ -267,66 +163,12 @@
       </div>
     </div>
 
-    <!--<div>
-      <el-menu  :default-active="activeIndex" @select="handleSelect" mode="horizontal">
-        <el-menu-item index="1">通知中心</el-menu-item>
-        <el-menu-item index="2">文件下载中心</el-menu-item>
-        &lt;!&ndash;<el-menu-item index="3">登录供方管理系统</el-menu-item>
-        <el-menu-item index="4">账户注册</el-menu-item>&ndash;&gt;
-      </el-menu>
-    </div>
-
-    <div class="components-container home-wrapper">
-
-      <el-card style="width: 1004px;" class="box-card" v-if="activeIndex == 1">
-        <div slot="header">
-          <span>
-            <i class="icon icon-table2"></i> 通知中心
-          </span>
-        </div>
-        <el-table fit :data="noticeList"  style="width: 100%; height: 100vh;" @row-click="DownloadFile">
-          <el-table-column prop="Name" label="通知标题">
-            <template slot-scope="scope">
-              <i class="el-icon-caret-right"></i>
-              <a style="margin-left: 5px">{{ scope.row.Name }}</a>
-            </template>
-          </el-table-column>
-          <el-table-column prop="CreateOn" label="时间" width="141">
-            <template slot-scope="scope">
-              {{ jstimehandle(scope.row.CreateOn+'') }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-card>
-
-      <el-card style="width: 1004px" class="box-card" v-if="activeIndex == 2">
-        <div slot="header">
-          <span>
-            <i class="icon icon-table2"></i> 文件下载中心
-          </span>
-        </div>
-        <el-table fit :data="fileList" style="width: 100%;  height: 100vh;" @row-click="DownloadFile">
-          <el-table-column prop="Name" label="文件名">
-            <template slot-scope="scope">
-              <i class="el-icon-caret-right"></i>
-              <a style="margin-left: 5px">{{ scope.row.Name }}</a>
-            </template>
-          </el-table-column>
-          <el-table-column prop="CreateOn" label="时间" width="141">
-            <template slot-scope="scope">
-              {{ jstimehandle(scope.row.CreateOn+'') }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-card>
-    <div>-->
-
     <div>
       <footer class="login-footer1">
         <div
           class="foot-wrapper"
           style="height: 30px; background-color: transparent; color:#A9A9A9; padding-top: 10px; text-align: right"
-        >©大港油田信息中心 版权所有</div>
+        >©信息中心 版权所有</div>
       </footer>
     </div>
   </div>
@@ -540,144 +382,6 @@ export default class Login extends Vue {
 }
 </script>
 
-<!--<script>
-import Sticky from '@/components/Sticky'
-
-export default {
-  layout () {
-    return 'site'
-  },
-  login() {
-    this.logging = true
-    this.$refs.user.validate(async (valid) => {
-      try {
-        if (valid) {
-          await this.$store.dispatch('auth/login', {
-            fields: {
-              username: this.model.username.replace(/(^\s*)|(\s*$)/g, ""),
-              password: this.model.password.replace(/(^\s*)|(\s*$)/g, "")
-            }
-          })
-          if (process.env.appclient == 'lims') {
-            this.$router.push(this.$route.query.page || '/')
-          } else if (process.env.appclient == 'cellbank') {
-            this.$router.push(this.$route.query.page || '/indexdqm')
-          } else {
-            this.$router.push(this.$route.query.page || '/')
-          }
-        }
-      } catch (e) {
-        // this.$message.warning(e.message)
-        this.$message.warning('账号或密码错误')
-      } finally {
-        this.logging = false
-      }
-    })
-  },
-  logout() {
-    this.$store.dispatch('logout')
-  },
-
-  name: 'StickyDemo',
-  components: {
-    Sticky
-  },
-  data () {
-    const model = {
-      username: '',
-      password: ''
-    }
-
-    // form validate rules
-    const rules = {
-      username: [{
-        required: true,
-        message: '请输入用户名'
-      }],
-      password: [{
-        required: true,
-        message: '请输入密码'
-      }]
-    }
-
-    return {
-      loginMode: 1,
-      model: model,
-      rules: rules,
-      error: null,
-      loading: false,
-      noticeList: [], //通知列表
-      fileList: [], //文档列表
-      activeIndex: '0',
-      activeName: 'first',
-    }
-  },
-
-  created () {
-    this.initNoticeListData()
-    this.initFileListData()
-  },
-
-  methods: {
-    handleSelect (key, keyPath) {
-      if (key === '0' || key === '1' || key === '2') {
-        this.activeIndex = key
-      }
-    },
-    //获取通知列表
-    initNoticeListData() {
-      let _this = this
-      //传递列名
-      const params = {
-        colName: "NoticeTab"
-      }
-      _this.$axios.get("/document/getdocumentnameandtime", {params})
-        .then(function (response) {
-          _this.noticeList = response.data
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
-    },
-    //获取文件列表
-    initFileListData() {
-      let _this = this
-      //传递列名
-      const params = {
-        colName: "DocTab"
-      }
-      _this.$axios.get("/document/getdocumentnameandtime", {params})
-        .then(function (response) {
-          _this.fileList = response.data
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
-    },
-    //下载文件
-    DownloadFile(row){
-      let val = row.FileURL
-      let urlArr = val.split('|')
-      location.href = "http://" + urlArr[0]
-    },
-    //格式化时间
-    jstimehandle(val) {
-      if (val === '') {
-        return '&#45;&#45;&#45;&#45;'
-      } else if (val === '0001-01-01T08:00:00+08:00') {
-        return '&#45;&#45;&#45;&#45;'
-      } else if (val === '5000-01-01T23:59:59+08:00') {
-        return '永久'
-      } else {
-        val = val.replace('T', ' ')
-        return val.substring(0, 10)
-      }
-    }
-  }
-
-}
-</script>-->
-
 <style lang="scss" scoped>
 @import "../assets/styles/base/variables";
 
@@ -761,21 +465,20 @@ export default {
 }
 
 .back-width {
-  background-color: #f8f6ee; /*#2F79F6   #E5E6EB */
+  background-color: #3273FC; /*#2F79F6   #E5E6EB */
   position: fixed;
   margin: auto;
   left: 0;
   right: 0;
-  top: 130px;
+  top: 0px;
   width: 100%;
-  height: 550px;
-  margin-bottom: 40px;
+  height: calc(100vh - 40px);
 }
 
 .login-body {
-  background: url("../assets/img/gf.jpg") no-repeat left 50%;
+  background: url("../assets/img/gf.png") no-repeat left 50%;
   font-family: "Open Sans", sans-serif;
-  background-color: #2469e8;
+  background-color: #3273FC;
   background-size: cover;
 
   /*background-size: cover;
@@ -787,13 +490,13 @@ export default {
   position: absolute;
 
   margin: auto;
-  left: -400px;
+  left: 0px;
+  top: 0px;
   right: 0;
   bottom: 0;
-  width: 800px;
-  height: 550px;
-  /*
-    top: 0;
+  width: 100%;
+  height: calc(100vh - 40px);
+  /*top: 0;
     right: 0;
     bottom: 0;
     left: 0;*/
@@ -803,11 +506,13 @@ export default {
   /*flex: 1;
     width: 100%;*/
   position: relative;
-  max-width: 22rem;
-  top: 60px;
-  left: 850px;
+  max-width: 40rem;
+  top:50%;
+  left:50%;
   font-size: 0.875rem;
   opacity: 0.9;
+  margin-top: -200px;
+  margin-left: -3rem;
 
   &-header {
     margin-bottom: 1rem;