角色切换，页面改造init

src/components/common/header.vue

@@ -183,6 +183,41 @@
               </el-dropdown-menu>
             </el-dropdown>
           </li>
+          <!-- 角色切换-->
+          <li class="menu-item">
+            <el-dropdown
+              @command="switchRole"
+              trigger="click"
+              class="menu-item-inner nav-dropdown"
+            >
+              <span class="dropdown-link">
+                <span>
+                  交易用户
+                </span>
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                :appendToBody="false"
+                :visibleArrow="false"
+                :boundariesPadding="0"
+                slot="dropdown"
+                class="userDropdown"
+              >
+                <el-dropdown-item
+                  v-for="item in menuRole.list"
+                  :key="item.id"
+                  :command="item.id"
+                >
+                  <div
+                    class="dropdown-menu-item-inner"
+                    :class="[{'is-active': menuRole.current === item}]"
+                  >
+                    <span class="menu-item-text">{{ item.name }}</span>
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </li>
         </ul>
       </div>
     </header>
@@ -280,6 +315,13 @@ export default {
           /* {id: 'out', name: this.$t('nav.menu_logOut')},*/
         ],
       },
+      menuRole: {
+        current: {id: 'tradeUser', name: '交易用户'},
+        list: [
+          {id: 'tradeUser', name: '交易用户'},
+          {id: 'marketMaker', name: '做市商'},
+        ],
+      },
       userData: '',
       headerImg: '',
       perUrl: 'personal',
@@ -312,15 +354,15 @@ export default {
     let yyyfToken = localStorage.getItem('yyyfToken');
     this.isSubmit = localStorage.getItem('isSubmit') == 'true' ? true : false;
     if (yyyfToken == '' || yyyfToken == undefined) {
-      this.$alert('未从以渔有方登录，点击确定返回登录', '提示', {
+      // this.$alert('未从以渔有方登录，点击确定返回登录', '提示', {
-        type: 'error',
+      //   type: 'error',
-        showClose: false,
+      //   showClose: false,
-        confirmButtonText: '确定',
+      //   confirmButtonText: '确定',
-        confirmButtonClass: 'btn-self-style',
+      //   confirmButtonClass: 'btn-self-style',
-        callback: () => {
+      //   callback: () => {
-          window.location.href = yyyfUrl;
+      //     window.location.href = yyyfUrl;
-        },
+      //   },
-      });
+      // });
     } else {
       //请求类型
       this.reqType = localStorage.getItem('reqType');
@@ -491,6 +533,12 @@ export default {
         location.href = '/personal?perUrl=' + this.perUrl + '#/' + command;
       }
     },
+    switchRole(command) {
+      if (!command) {
+        return;
+      }
+      location.href = '/market-announce?perUrl=' + this.perUrl;
+    },
     exit(params) {
       logOut().then(res => {
         if (res.data.code === 200 || res.data.code === 202) {

src/components/common/market-header.vue

@@ -0,0 +1,639 @@
+<template>
+  <div class="main-nav">
+    <header class="nav-header">
+      <!-- 左侧 nav -->
+      <div class="leftNav">
+        <ul class="nav-menu">
+          <!-- menu -->
+          <template v-for="m in menuLeft">
+            <li :key="m.$index" class="menu-item">
+              <a
+                :class="perUrl === m.link.split('/')[1] ? 'navColor' : ''"
+                v-t="m.t"
+                :href="m.link || 'javascript:'"
+              ></a>
+            </li>
+          </template>
+        </ul>
+      </div>
+      <!-- 右侧 nav -->
+      <div class="rightNav" style="{width: 18%}">
+        <ul class="nav-menu">
+          <!-- menu -->
+          <template v-for="m in menuRight">
+            <li
+              :key="m.$index"
+              class="menu-item"
+              v-if="userData != '' && userData != undefined"
+            >
+              <a
+                :class="perUrl === m.link.split('/')[1] ? 'navColor' : ''"
+                v-t="m.t"
+                :href="m.link || 'javascript:'"
+              ></a>
+            </li>
+          </template>
+
+          <!-- 角色切换-->
+          <li class="menu-item">
+            <el-dropdown
+              @command="switchRole"
+              trigger="click"
+              class="menu-item-inner nav-dropdown"
+            >
+              <span class="dropdown-link">
+                <span>
+                  交易用户
+                </span>
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                :appendToBody="false"
+                :visibleArrow="false"
+                :boundariesPadding="0"
+                slot="dropdown"
+                class="userDropdown"
+              >
+                <el-dropdown-item
+                  v-for="item in menuRole.list"
+                  :key="item.id"
+                  :command="item.id"
+                >
+                  <div
+                    class="dropdown-menu-item-inner"
+                    :class="[{'is-active': menuRole.current === item}]"
+                  >
+                    <span class="menu-item-text">{{ item.name }}</span>
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </li>
+        </ul>
+      </div>
+    </header>
+  </div>
+</template>
+
+<script>
+import {getCurrentLanguage} from '@/common/i18n';
+import {getExchangeRateCookie, setExchangeRateCookie} from '@/utils/auth';
+import {logOut} from '@/api/user';
+import {FILE_URL} from '@/api/app';
+import {submit, reStart} from '@/api/yyyf';
+import {signUp, signIn} from '@/api/user';
+import {yyyfUrl} from '@/api/app.js';
+
+const Menu = {
+  icon: [{t: 'nav.menu_name', link: '/'}],
+  left: [
+    {t: '发布广告', link: '/market-announce'},
+    {t: '法币交易', link: '/market-order'},
+  ],
+  right: [],
+};
+
+export default {
+  name: 'market-header',
+  props: {
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    borderStyle: {
+      type: String,
+      default: 'default',
+      validator: val => ['default', 'full'].indexOf(val) > -1,
+    },
+  },
+
+  data() {
+    return {
+      menuIcon: Menu.icon,
+      menuLeft: Menu.left,
+      menuRight: Menu.right,
+      menuRole: {
+        current: {id: 'tradeUser', name: '交易用户'},
+        list: [
+          {id: 'tradeUser', name: '交易用户'},
+          {id: 'marketMaker', name: '做市商'},
+        ],
+      },
+      userData: '',
+      headerImg: '',
+      perUrl: 'personal',
+      file: '',
+      showCounting: true,
+      //0 考试 1 练习 2 不计分
+      reqType: 2,
+      //剩余时间
+      remainingTime: 0,
+      //防止重复提交
+      isSubmit: false,
+      hour: 0,
+      mins: 0,
+      sec: 0,
+      setIntervalInt: 0,
+    };
+  },
+
+  created() {
+    let yyyfToken = localStorage.getItem('yyyfToken');
+    this.isSubmit = localStorage.getItem('isSubmit') == 'true' ? true : false;
+    if (yyyfToken == '' || yyyfToken == undefined) {
+      // this.$alert('未从以渔有方登录，点击确定返回登录', '提示', {
+      //   type: 'error',
+      //   showClose: false,
+      //   confirmButtonText: '确定',
+      //   confirmButtonClass: 'btn-self-style',
+      //   callback: () => {
+      //     window.location.href = yyyfUrl;
+      //   },
+      // });
+    } else {
+      //请求类型
+      this.reqType = localStorage.getItem('reqType');
+      //如果考试
+      if (this.reqType == 0) {
+        //获取考试剩余时间
+        this.remainingTime = localStorage.getItem('remainingTime');
+        //启动倒计时
+        this.setIntervalInt = setInterval(this.showTime, 1000);
+      }
+      this.file = FILE_URL;
+      this.perUrl = window.location.pathname.split('/')[1];
+      // console.log(this.perUrl);
+
+      // this.userData = Cookie.get('userData');
+      this.userData = localStorage.getItem('userData');
+
+      if (this.userData != '' && this.userData != undefined) {
+        this.userData = JSON.parse(localStorage.getItem('userData'));
+        // console.log(this.userData);
+        if (this.userData.avatar != null) {
+          this.headerImg = this.file + this.userData.avatar;
+        } else {
+          this.headerImg = this.userData.avatar;
+        }
+      }
+      // console.log(this.headerImg);
+
+      const currentLang = getCurrentLanguage();
+      for (let item of this.lang.list) {
+        if (item.lang === currentLang) {
+          this.lang.current = item;
+          break;
+        }
+      }
+      const currentrate = getExchangeRateCookie();
+      for (let item of this.exRate.list) {
+        if (item.id === currentrate) {
+          this.exRate.current = item;
+          // setExchangeRateCookie(currentrate);
+          break;
+        }
+      }
+    }
+  },
+
+  methods: {
+    showTime: function() {
+      let remainingTime = this.remainingTime;
+      remainingTime -= 1;
+      localStorage.setItem('remainingTime', remainingTime);
+      this.remainingTime = remainingTime;
+      let h = 0;
+      let m = 0;
+      let s = 0;
+      if (remainingTime > 0) {
+        h = Math.floor(remainingTime / 60 / 60);
+        m = Math.floor((remainingTime / 60) % 60);
+        s = Math.floor(remainingTime % 60);
+      }
+      if (h < 10) {
+        this.hour = this.format(h, 2);
+      } else {
+        this.hour = h;
+      }
+      this.mins = this.format(m, 2);
+      this.sec = this.format(s, 2);
+      if (h <= 0 && m <= 0 && s <= 0) {
+        if (!this.isSubmit)
+          this.$message.warning('考试时间到,系统将自动提交试卷');
+        this.submitExam();
+      }
+    },
+    format: function(num, n) {
+      return (Array(n).join(0) + num).slice(-n);
+    },
+    sign(params) {
+      signUp(params).then(res => {
+        if (res.data.code === 200) {
+          this.login({
+            tel: params.tel,
+            password: params.password,
+          });
+        } else {
+          this.$message.warning(res.data.msg);
+          this.isSubmit = false;
+        }
+      });
+    },
+    login(params) {
+      signIn(params).then(res => {
+        // console.log(res);
+        if (res.data.code === 200) {
+          //判断是否保存自动登录
+          // if( this.checked === true ){
+          //   Cookie.set('phoneNum',num)
+          //   Cookie.set('password',pass)
+          // }
+          //保存登录的token到cookie
+          // Cookie.set('token', res.data.data.token);
+          localStorage.setItem('token', res.data.data.token);
+          //重复提交标识
+          localStorage.setItem('isSubmit', JSON.stringify(false));
+          //保存登录的用户信息到cookie
+          // Cookie.set('userData', res.data.data);
+          localStorage.setItem('userData', JSON.stringify(res.data.data));
+          // console.log(JSON.parse(localStorage.getItem('userData')));
+
+          // 保存userID的信息到cookie
+          // Cookie.set('userID', res.data.data.id);
+          localStorage.setItem('userID', res.data.data.id);
+
+          // 保存邀请码信息
+          localStorage.setItem('invitationCode', res.data.data.invitationCode);
+          this.isSubmit = false;
+          location.href = '/entry';
+        } else {
+          this.$message.warning(res.data.msg);
+          this.isSubmit = false;
+        }
+      });
+    },
+    closeWindow: function() {
+      if (
+        navigator.userAgent.indexOf('Firefox') != -1 ||
+        navigator.userAgent.indexOf('Chrome') != -1
+      ) {
+        window.location.href = 'about:blank';
+        window.close();
+      } else {
+        window.opener = null;
+        window.open('', '_self');
+        window.close();
+      }
+    },
+    switchRole(command) {
+      if (!command) {
+        return;
+      }
+      location.href = '/';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../common/style/base';
+// .main-nav{
+//   padding: 0 20px;
+// }
+.nav-header {
+  max-width: 100%;
+  min-width: 1180px;
+  height: 65px;
+  line-height: 65px;
+  background-color: #23252b;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  // padding: 0 $cec-header-padding;
+
+  $local-menu-text-color: #6880a0;
+
+  .logoBox {
+    display: flex;
+    align-items: center;
+    // margin-left: 12.6%;
+    margin-right: 7.9%;
+
+    img {
+      width: 45px;
+      height: 45px;
+    }
+  }
+
+  h2 {
+    margin: 0;
+    padding: 0;
+  }
+
+  .mainTitle {
+    color: #fff;
+    font-size: 28px;
+    font-weight: normal;
+    margin-left: 9px;
+  }
+
+  .leftNav {
+    width: 45%;
+    flex: 1;
+    display: flex;
+    margin-left: 2%;
+
+    .nav-menu {
+      width: 60%;
+    }
+
+    .menu-item {
+      margin-right: 3%;
+    }
+  }
+
+  .centerNav {
+    //flex: 1;
+    width: 230px;
+
+    .el-button {
+      color: #ffffff;
+    }
+  }
+
+  .rightNav {
+    width: 10%;
+    margin-right: 2%;
+    // width: 350px;
+    // display: flex;
+    // flex-direction: row-reverse;
+    .nav-menu {
+      // width: 350px;
+      //     display: flex;
+      // flex-direction: row-reverse;
+    }
+  }
+
+  .nav-menu {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    justify-content: space-between;
+
+    .menu-item {
+      display: flex;
+      align-items: center;
+
+      font-size: 14px;
+      color: $local-menu-text-color;
+
+      &.no-padding {
+        padding: 0;
+      }
+
+      > a {
+        // color: $local-menu-text-color;
+        color: #545663;
+
+        &.is-active {
+          color: white;
+        }
+      }
+
+      span {
+        color: #545663;
+      }
+    }
+
+    /* 对 直接子代 a ，和 .menu-item-inner 进行定位布局 */
+    .menu-item > a,
+    .menu-item-inner {
+      display: flex;
+      align-items: center;
+
+      box-sizing: border-box;
+      // padding: 0 10px;
+    }
+  }
+
+  .nav-menuRight {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    // justify-content: space-between;
+    .menu-item {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: $local-menu-text-color;
+
+      &.no-padding {
+        padding: 0;
+      }
+
+      > a {
+        // color: $local-menu-text-color;
+        color: #545663;
+
+        &.is-active {
+          color: white;
+        }
+      }
+
+      span {
+        color: #545663;
+      }
+    }
+
+    /* 对 直接子代 a ，和 .menu-item-inner 进行定位布局 */
+    .menu-item > a,
+    .menu-item-inner {
+      display: flex;
+      align-items: center;
+
+      box-sizing: border-box;
+      // padding: 0 10px;
+    }
+  }
+
+  .navColor {
+    color: #e8494a !important;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 3px;
+      background-color: #e8494a;
+      position: absolute;
+      bottom: 1%;
+      left: 0;
+    }
+  }
+
+  .nav-menu {
+    /* logo area */
+    .nav-logo-area {
+      padding: 0;
+
+      .logo_text {
+        font-size: 26px;
+        color: #ffffff;
+      }
+    }
+  }
+
+  @at-root {
+    &_bordered {
+      border-bottom: 1px solid #1f3e5a;
+    }
+  }
+
+  /* 导航栏 下拉菜单 */
+  .nav-dropdown {
+    &.el-dropdown {
+      justify-content: center;
+    }
+
+    .dropdown-link {
+      cursor: pointer;
+      color: $local-menu-text-color;
+    }
+
+    .el-dropdown-menu {
+      background-color: #fff;
+      border: none;
+      border-radius: 4px;
+      margin: 0;
+      padding: 0;
+      top: 55px !important;
+
+      &__item {
+        height: 42px;
+        line-height: 42px;
+
+        &:not(.is-disabled):hover {
+          background-color: #d3dae2;
+        }
+
+        .is-active {
+          color: #666 !important;
+        }
+      }
+
+      .dropdown-menu-item-inner {
+        color: #666;
+      }
+    }
+
+    .exRateDropdown {
+      left: -100% !important;
+    }
+
+    .langDropdown {
+      left: -50% !important;
+    }
+
+    .userDropdown {
+      left: -5% !important;
+      width: 110px;
+
+      .el-dropdown-menu__item {
+        padding: 0;
+      }
+
+      .dropdown-menu-item-inner {
+        text-align: center;
+      }
+    }
+  }
+
+  .logOut {
+    border-top: 1px solid rgba(237, 238, 243, 1);
+    height: 50px !important;
+    line-height: 50px !important;
+  }
+
+  .nav-dropdown-i18n {
+    height: 100%;
+
+    .dropdown-menu-item-inner {
+      width: 135 - 2 * 20px; // 20px 为 el-dropdown-item padding
+      color: $local-menu-text-color;
+      padding-left: 25px;
+      box-sizing: border-box;
+      position: relative;
+
+      &.is-active {
+        color: white;
+      }
+    }
+
+    .menu-item-icon {
+      position: absolute;
+      left: 0;
+      line-height: 42px;
+      font-size: 1.2em;
+      font-weight: bold;
+      color: $cec-color-text-regular;
+    }
+  }
+
+  .registered {
+    width: 70px;
+    height: 28px;
+    background-color: #e8494a;
+    border-radius: 14px;
+    font-size: 14px;
+    padding: 0;
+    border-color: #3e5173;
+    transition: all 0.2s linear;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      color: #fff !important;
+    }
+
+    &:hover {
+      background-color: #fff;
+
+      span {
+        color: #e8494a !important;
+      }
+    }
+  }
+}
+
+.main-nav {
+  .counting {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 150px;
+    background: #2b2c35;
+    border: 1px solid rgba(71, 71, 71, 0.1);
+    border-radius: 4px 4px 4px 4px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 200px;
+    z-index: 999;
+    cursor: pointer;
+
+    p {
+      width: 100%;
+      text-align: center;
+    }
+  }
+}
+
+.btn-self-style {
+  background: #f56c6c !important;
+  color: #fff !important;
+}
+</style>

src/pages/market-announce.app.js

@@ -0,0 +1,7 @@
+import pageCommon from '@/common/page-common';
+
+import App from './market-announce';
+
+pageCommon.createPageInstance({
+  render: h => h(App),
+});

src/pages/market-announce.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <market-header></market-header>
+    <main class="main-coins">
+      <!-- OTC一级标题 -->
+      <ul class="exchange-menu">
+        <!-- 购买 -->
+        <li class="mensu-item">
+          <a
+            :class="showCommentInput === true ? 'buyTwo' : 'buy'"
+            @click="hangdelClickShow()"
+            >{{ $t('order.adver.adver_buy') }}</a
+          >
+        </li>
+        <li class="mensu-item">
+          <div class="line"></div>
+        </li>
+        <!-- 出售 -->
+        <li class="mensu-item">
+          <a
+            class="sell"
+            :class="ifCommentInput === true ? 'buyTwo' : 'buy'"
+            @click="hangdelClick()"
+            >{{ $t('order.adver.adver_sell') }}</a
+          >
+        </li>
+      </ul>
+
+      <!-- 判断点击的时候什么 切换对应的子组件 -->
+      <!-- 购买 -->
+      <div v-show="showCommentInput">
+        <AnnounceTableBi v-if="hackResetBuy"></AnnounceTableBi>
+      </div>
+      <!-- 出售 -->
+      <div v-show="ifCommentInput">
+        <AnnounceTableSell v-if="hackReset"></AnnounceTableSell>
+      </div>
+    </main>
+
+    <Footer></Footer>
+  </div>
+</template>
+<script>
+// 引入子组件
+import NavHeader from '@/components/common/header';
+import Footer from '@/components/common/footer';
+import AnnounceTableBi from '@/components/announce/announce-tabgle-bi';
+import AnnounceTableSell from '@/components/announce/announce-table-sell';
+import MarketHeader from '@/components/common/market-header';
+
+export default {
+  name: 'market-announce',
+  components: {
+    MarketHeader,
+    Footer,
+    AnnounceTableBi,
+    AnnounceTableSell,
+  },
+  data() {
+    return {
+      showCommentInput: true, //购买
+      ifCommentInput: false, //出售
+      hackReset: true,
+      hackResetBuy: true,
+    };
+  },
+  methods: {
+    // 点击切换table栏
+    hangdelClickShow() {
+      this.hackReset = false;
+      this.hackResetBuy = false;
+      this.$nextTick(() => {
+        this.hackResetBuy = true;
+      });
+
+      this.ifCommentInput = false;
+      this.showCommentInput = true;
+    },
+    hangdelClick() {
+      this.hackResetBuy = false;
+      this.hackReset = false;
+      this.$nextTick(() => {
+        this.hackReset = true;
+      });
+      this.showCommentInput = false;
+      this.ifCommentInput = true;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.main-coins {
+  width: 1220px;
+  margin: 0 auto;
+  margin-top: 73px;
+}
+.exchange-menu {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  margin-bottom: 35px;
+  color: #545663;
+  font-size: 18px;
+  .mensu-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #545663;
+    margin-right: 10px;
+    > a {
+      color: #545663;
+    }
+  }
+}
+.buy {
+  width: 37px;
+  height: 25px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+  margin-right: 20px;
+}
+.buyTwo {
+  width: 37px;
+  height: 25px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+  margin-right: 20px;
+  color: #e8494a !important;
+}
+.line {
+  position: absolute;
+  top: 3px;
+  left: 56px;
+  width: 2px;
+  height: 18px;
+  background: rgba(71, 72, 85, 1);
+}
+</style>

src/pages/market-order.app.js

@@ -0,0 +1,7 @@
+import pageCommon from '@/common/page-common';
+
+import App from './market-order';
+
+pageCommon.createPageInstance({
+  render: h => h(App),
+});

src/pages/market-order.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <NavHeader></NavHeader>
+    <main class="main-coins">
+      <!-- 广告管理 -->
+      <OrderOtcAdver></OrderOtcAdver>
+      <!-- 订单管理 -->
+      <OrderOtcGoods></OrderOtcGoods>
+    </main>
+    <Footer></Footer>
+  </div>
+</template>
+<script>
+// 引入子组件
+import NavHeader from '@/components/common/header';
+import Footer from '@/components/common/footer';
+import OrderOtcAdver from '@/components/order/order-otc-adver';
+import OrderOtcGoods from '@/components/order/order-otc-goods';
+
+export default {
+  name: 'market-order',
+  components: {
+    NavHeader,
+    Footer,
+    OrderOtcAdver,
+    OrderOtcGoods,
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+<style lang="scss">
+.main-coins {
+  width: 1220px;
+  margin: 0 auto;
+  margin-top: 40px;
+}
+// .main-adver {
+//   // margin-top: 18px;
+//   display: flex;
+//   flex-direction: row;
+//   .adver-select {
+//     margin-right: 48px;
+//     .biZhon {
+//       width: 36px;
+//       height: 27px;
+//       color: #333;
+//       font-size: 18px;
+//       text-align: left;
+//       padding-right: 18px;
+//     }
+//   }
+// }
+// .action {
+//   width: 110px;
+//   height: 35px;
+//   font-size: 16px;
+//   text-align: center;
+//   padding-left: 208px;
+//   margin: auto;
+//   .btn-widget {
+//     background-color: #c7282c;
+//     width: 110px;
+//     border: 2px solid #c7282c;
+//     color: #fff;
+//     &:active {
+//       background: #9f2023;
+//       border: 2px solid #9f2023;
+//       opacity: 1;
+//       color: #ba8889;
+//     }
+//   }
+// }
+// .bian {
+//   margin-top: 40px;
+// }
+// .el-table th {
+//   height: 60px;
+// }
+// .el-table thead {
+//   color: #333;
+// }
+// .tableimg {
+//   margin-right: 21px;
+// }
+// .deldet {
+//   cursor: pointer;
+//   color: #c7282c;
+// }
+// .el-select-dropdown__item.selected {
+//   color: #c7282c;
+//   font-weight: bold;
+// }
+// .orderTittle {
+//   color: #333;
+//   font-size: 23px;
+//   margin-top: 30px;
+//   margin-bottom: 5px;
+// }
+</style>