样式调整

src/components/Layout/components/Navbar.vue

@@ -2,13 +2,23 @@
   <div
     class="navbar"
   >
-    <hamburger
-      class="hamburger-container"
-      :toggle-click="toggleSideBar"
-      :is-active="sidebar.opened"
-    />
+    <div class="left-menu">
+      <div class="title">
+        <div class="logo-container">
+          <img
+            :src="logo"
+            class="logo"
+          >
+        </div>
+      </div>
+      <hamburger
+        class="hamburger-container"
+        :toggle-click="toggleSideBar"
+        :is-active="sidebar.opened"
+      />
 
-    <breadcrumb class="breadcrumb-container" />
+      <breadcrumb class="breadcrumb-container" />
+    </div>
 
     <ul class="right-menu">
       <li>
@@ -116,6 +126,9 @@ export default {
     },
     scenicName () {
       return this.$store.state.user.scenicName
+    },
+    logo () {
+      return this.$store.state.app.customLogo
     }
   },
   data () {
@@ -172,6 +185,35 @@ export default {
   background: $blue;
   position: relative;
   color: #fff;
+  display: flex;
+  justify-content: space-between;
+
+  .left-menu {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+    vertical-align: middle;
+
+    .title {
+      display: flex;
+      align-items: center;
+      width: 220px;
+      height: 100%;
+      justify-content: center;
+
+      .logo-container {
+        border-radius: 50%;
+        height: 35px;
+        background: #fff;
+        border-radius: 50%;
+        text-align: center;
+        img {
+          height: 25px;
+        }
+      }
+    }
+  }
 
   .avatar-container {
     margin: 0 10px;

src/pages/dashboard/index.vue

@@ -121,7 +121,7 @@
           </div>
         </div> -->
         <div
-          class="history dashboard-panel"
+          class="history dashboard-panel table-box"
           v-if="hasDataPermission">
           <div class="panel-title">
             最近30天销售走势图

src/pages/login/index.vue

@@ -267,6 +267,7 @@ $light_gray: #eee;
     color: #454545;
     border: 1px solid #C3D5E8;
     border-radius: 8px;
+    margin-bottom: 15px;
   }
   .el-input {
     display: inline-block;
@@ -337,7 +338,7 @@ $light_gray: #eee;
         width: 480px;
         height: 100%;
         box-sizing: border-box;
-        padding: 45px;
+        padding: 40px 50px;
         padding-top: 60px;
 
         .title {
@@ -347,6 +348,7 @@ $light_gray: #eee;
 
           .logo {
             height: 70px;
+            margin-bottom: 30px;
           }
 
           h1 {

src/pages/sellManage/common/TicketList.vue

@@ -4,102 +4,103 @@
     :class="{focusFlash:isFocus}">
     <div
       v-if="!isPeriodTicket"
-      class="top-title">
-      游玩日期
-      <div>
-        <el-date-picker
-          style="width:140px"
-          :clearable="false"
-          :picker-options="dateOption"
-          v-model="playDate"
-          type="date"
-          placeholder="选择日期时间"
-          @change="handleDateChange"
-        >
-        </el-date-picker>
+      class="select-date">
+      <div class="top-title">
+        游玩日期
       </div>
+      <el-date-picker
+        :clearable="false"
+        :picker-options="dateOption"
+        v-model="playDate"
+        type="date"
+        placeholder="选择日期时间"
+        @change="handleDateChange"
+      >
+      </el-date-picker>
     </div>
-    <div class="top-title">选择票种</div>
-    <div
-      class="search-wrap"
-      slot="search">
-      <el-input
-        ref="quickSearch"
-        id="quick-search"
-        clearable
-        class="search-input"
-        placeholder="按F2 快速筛选"
-        v-model="keyword">
-        <i
-          class="el-icon-search el-input__icon"
-          slot="suffix">
-        </i>
-      </el-input>
+    <div class="select-ticket">
+      <div class="top-title">选择票种</div>
+      <div
+        class="search-wrap"
+        slot="search">
+        <el-input
+          ref="quickSearch"
+          id="quick-search"
+          clearable
+          class="search-input"
+          placeholder="按F2 快速筛选"
+          v-model="keyword">
+          <i
+            class="el-icon-search el-input__icon"
+            slot="suffix">
+          </i>
+        </el-input>
 
-      <!-- <TagSelector v-model="selectedTag"></TagSelector> -->
-    </div>
-    <div
-      :class="['list-wrap custom-scroll', category === 'batch' && 'list-wrap-batch']"
-      v-loading="loading">
+        <!-- <TagSelector v-model="selectedTag"></TagSelector> -->
+      </div>
       <div
-        class="noData"
-        v-if="!filterTableData.length">
-        暂无数据
+        :class="['list-wrap custom-scroll', category === 'batch' && 'list-wrap-batch']"
+        v-loading="loading">
+        <div
+          class="noData"
+          v-if="!filterTableData.length">
+          暂无数据
+        </div>
+        <ul class="list-content">
+          <li
+            class="list-item"
+            :style="{padding:'15px 10px 15px 5px'}"
+            :class="{
+              active:currentTicket&&currentTicket.id===item.id,
+              active2:item.isTop && currentTicket &&currentTicket.id!==item.id,
+              disabled: item && item.isSale === 0
+            }"
+            v-for="(item, index) in filterTableData"
+            :key="index"
+            @click="changeTicket(item)"
+            @contextmenu.prevent="showTopBtn(item)">
+            <div class="badge" v-if="item && item.isSale === 0">
+              停售
+            </div>
+            <h5 class="title">
+              <el-tooltip
+                :content="item.isTop ? '取消置顶' : '置顶'"
+                placement="top"
+                effect="dark">
+                <span
+                  v-if="!item.isTop"
+                  class="goTop"
+                  @click.stop="setTop(item)"><i class="el-icon-upload2"></i></span>
+                <span
+                  class="goTop"
+                  v-else
+                  @click.stop="cancelTop(item)"><i class="el-icon-download"></i></span>
+              </el-tooltip>
+              <el-tooltip
+                :content="getTicketTip(item)"
+                placement="top"
+                effect="dark">
+                <span @click.stop="showTicketInfo(item)">
+                  {{ item.name }}
+                </span>
+              </el-tooltip>
+            </h5>
+            <i
+              class="top-sign"
+              v-if="item.isTop"></i>
+            <span
+              class="price"
+              v-if="item.price">
+              <b>{{ item.price }}</b> 元
+            </span>
+            <span
+              class="price"
+              v-else>
+              无今日价格
+            </span>
+          </li>
+        </ul>
       </div>
-      <ul class="list-content">
-        <li
-          class="list-item"
-          :style="{padding:'15px 10px 15px 5px'}"
-          :class="{
-            active:currentTicket&&currentTicket.id===item.id,
-            active2:item.isTop && currentTicket &&currentTicket.id!==item.id,
-            disabled: item && item.isSale === 0
-          }"
-          v-for="(item, index) in filterTableData"
-          :key="index"
-          @click="changeTicket(item)"
-          @contextmenu.prevent="showTopBtn(item)">
-          <div class="badge" v-if="item && item.isSale === 0">
-            停售
-          </div>
-          <h5 class="title">
-            <el-tooltip
-              :content="item.isTop ? '取消置顶' : '置顶'"
-              placement="top"
-              effect="dark">
-              <span
-                v-if="!item.isTop"
-                class="goTop"
-                @click.stop="setTop(item)"><i class="el-icon-upload2"></i></span>
-              <span
-                class="goTop"
-                v-else
-                @click.stop="cancelTop(item)"><i class="el-icon-download"></i></span>
-            </el-tooltip>
-            <el-tooltip
-              :content="getTicketTip(item)"
-              placement="top"
-              effect="dark">
-              <span @click.stop="showTicketInfo(item)">
-                {{ item.name }}
-              </span>
-            </el-tooltip>
-          </h5>
-          <i
-            class="top-sign"
-            v-if="item.isTop"></i>
-          <span
-            class="price"
-            v-if="item.price">
-            <b>{{ item.price }}</b> 元
-          </span>
-          <span
-            class="price"
-            v-else>
-            无今日价格
-          </span>
-        </li>
-      </ul>
     </div>
     <div
       v-if="category === 'batch'"
@@ -398,16 +399,11 @@ export default {
       })
     },
     handleBatchChange (row) {
-      if (!row) {
-        return
-      }
-
-      this.selectBatch = row
-      this.$set(this.currentTicket, 'batchConfigId', row.id)
-      this.$set(this.currentTicket, 'selectBatch', row)
       console.log('当前选择的场次', row)
-      this.$emit('update', this.currentTicket)
-      this.$emit('input', this.currentTicket)
+      this.selectBatch = row
+
+      this.$emit('set-batch', row)
+      this.$refs.singleTable.setCurrentRow(row)
     },
     formatDate (input) {
       return moment(input).format('YYYY-MM-DD')
@@ -481,30 +477,70 @@ export default {
   color: #0075ff !important;
 }
 </style>
-
 <style lang="scss" scoped>
 .el-radio {
   margin-right: 0;
 }
+
 .noData {
-  padding: 10px; font-size: 14px; color: #666;  text-align: center;
+  padding: 10px;
+  font-size: 14px;
+  color: #666;
+  text-align: center;
 }
+
 .price b {
-  color: red;
+  font-weight: 600;
 }
+
 .top-title {
-  display: flex;  padding: 10px 10px; font-size: 16px;  line-height: 1.4;color: $blue; background: rgb(238, 238, 238); justify-content: space-between; align-items: center;
-  .right-btn{
+  display: flex;
+  padding: 10px 10px;
+  font-size: 16px;
+  line-height: 1.4;
+  color: #333;
+  background: #fff;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+
+  .right-btn {
     display: flex;
   }
 }
+
+.select-date {
+  margin-bottom: 10px;
+
+  .el-date-editor {
+    margin: 0 10px;
+    width: calc(100% - 20px);
+  }
+}
+
+.select-ticket {
+  .search-wrap {
+    padding-top: 10px !important;
+  }
+}
+
 .mutipleTag {
-  position: absolute;top: 0; left: 0; width: 0;height: 0;color: #fff; pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  color: #fff;
+  pointer-events: none;
 
-border: 14px solid rgb(255, 94, 0); border-right-color: transparent; border-bottom-color: transparent;
+  border: 14px solid rgb(255, 94, 0);
+  border-right-color: transparent;
+  border-bottom-color: transparent;
 
   i {
-    position: absolute;  font-size: 12px; transform: translate(-12px,-12px);
+    position: absolute;
+    font-size: 12px;
+    transform: translate(-12px, -12px);
   }
 }
 

src/pages/sellManage/retail.vue

@@ -2,13 +2,14 @@
   <SaleLayout>
     <QuickType></QuickType>
     <!-- 票种列表 -->
-    <TickList
+    <TicketList
       ref="ticketList"
       type-id="1"
       slot="left"
       v-model="currentTicket"
       @update="handleUpdate"
-    ></TickList>
+      @set-batch="setBatch"
+    ></TicketList>
 
     <div slot="right">
       <!-- 昭苏打折使用定制的表单 -->
@@ -37,12 +38,13 @@
 
 <script>
 import SaleLayout from '@/layout/SaleLayout'
-import TickList from './common/TicketList'
+import TicketList from './common/TicketList'
 import QuickType from './common/QuickType'
 import FormInfo from './retail/FormInfo'
 import OrderInfo from './retail/OrderInfo'
 // import OrderRecord from './common/OrderRecord'
 import handleKeyBind from './common/keyBind'
+import { cloneDeep } from 'lodash'
 
 export default {
   data () {
@@ -53,7 +55,7 @@ export default {
   },
   components: {
     SaleLayout,
-    TickList,
+    TicketList,
     FormInfo,
     QuickType,
     OrderInfo
@@ -81,6 +83,11 @@ export default {
     },
     handleUpdate (ticket) {
       this.currentTicket = ticket
+    },
+    setBatch (batch) {
+      // 设置当前批次
+      this.$set(this.currentTicket, 'batchConfigId', batch.id)
+      this.$set(this.currentTicket, 'selectBatch', cloneDeep(batch))
     }
   },
   beforeDestroy () {

src/styles/index.scss

@@ -462,6 +462,8 @@ h6 {
   flex-direction: column;
   background: #fff;
   border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
 
   .search-wrap {
     width: 340px;
@@ -483,19 +485,20 @@ h6 {
     margin-top: 10px;
 
     .list-item {
-      position: relative;
       position: relative;
       z-index: 0;
       display: flex;
-      padding: 25px 10px 8px 5px;
+      padding: 15px 10px 8px 5px;
       margin-top: -2px;
-      color: $lightblue;
+      color: #333;
       cursor: pointer;
-      background: #fff;
+      background: #F2F6FF;
       border: 2px solid #f0f0f0;
       transition: all .3s;
       justify-content: space-between;
       align-items: center;
+      border-radius: 6px;
+      margin-bottom: 10px;
 
       .goTop {
         display: inline-block;
@@ -512,7 +515,7 @@ h6 {
       &:hover {
         z-index: 1;
         background: rgba(216, 225, 253, .3);
-        border: 2px solid darken(#f0f0f0, 3%);
+        border: 2px solid darken($blue, 1%);
 
         .goTop {
           i {
@@ -523,8 +526,13 @@ h6 {
 
       &.active {
         z-index: 2;
-        background: $yellow;
-        border: 2px solid darken($darkYellow, 8%);
+        background: $blue;
+        color: #fff;
+        border: 2px solid darken($blue, 1%);
+
+        .price {
+          color: #fff;
+        }
       }
 
       &.disabled {

src/styles/sidebar.scss

@@ -54,6 +54,9 @@
       height: 100%;
       width: calc(100% - 20px) !important;
       padding: 0 10px;
+      .el-menu--inline {
+        margin: 10px 0;
+      }
 
       .el-submenu__title {
         font-weight: 600;
@@ -95,8 +98,8 @@
     }
 
     .el-menu-item.is-active,.sidebar-container .el-submenu .el-menu-item.is-active{
-      background: $blue !important;
-      color: #fff !important;
+      background: #EBEDFA !important;
+      color: $blue !important;
 
       &:hover {
         background: $blue !important;