|
|
@@ -0,0 +1,528 @@
|
|
|
+<template>
|
|
|
+ <div class="main">
|
|
|
+ <BarCodeScan @handle="handleBarcode"></BarCodeScan>
|
|
|
+ <div class="btnWln" v-if="dataObj.dataResource === '1'">
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div style="color: #f59a23; font-size: 14px; border-bottom: 2px solid #f59a23; height: 40px; width: 140px">万里牛订单</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="text-align: center">
|
|
|
+ <el-button @click="clickCancel" size="small" v-if="dataObj.contractProductId" v-db-click>返回</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="text-align: right"> </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="btn" v-else>
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="8"> </el-col>
|
|
|
+ <el-col :span="8" style="text-align: center">
|
|
|
+ <el-button @click="clickCancel" size="small" v-if="dataObj.contractProductId" v-db-click>返回</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="text-align: right"> </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="body" v-if="dataObj.contractProductId">
|
|
|
+ <div class="left" :class="[dataObj.dataResource === '1' ? 'orange' : 'white']">
|
|
|
+ <LabelTemplate title="设计图"></LabelTemplate>
|
|
|
+ <div style="padding-left: 2vw; margin-top: 20px">
|
|
|
+ <div class="img">
|
|
|
+ <img v-if="dataObj.imgPath" :src="pathPrefix + dataObj.imgPath" alt="" @click="openFile(pathPrefix + dataObj.imgPath)" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 82%">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="middle" :class="[dataObj.dataResource === '1' ? 'orange' : 'white']">
|
|
|
+ <LabelTemplate title="产品信息"></LabelTemplate>
|
|
|
+ <div style="padding-left: 2vw; margin-top: 20px">
|
|
|
+ <div class="detail">
|
|
|
+ <div class="att">
|
|
|
+ <span>订单号: {{ dataObj.contractCode }}</span>
|
|
|
+ <span v-if="dataObj.tradeNo"> ({{ dataObj.tradeNo }})</span>
|
|
|
+ </div>
|
|
|
+ <div class="att">产品：{{ dataObj.productName }}</div>
|
|
|
+ <div class="att">品号：{{ dataObj.productColorCode }}</div>
|
|
|
+ <div class="att">品名：{{ dataObj.productColorName }}</div>
|
|
|
+ <div class="att">
|
|
|
+ 包装要求：
|
|
|
+ <div v-html="dataObj.packageRemarks"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right" :class="[dataObj.dataResource === '1' ? 'orange' : 'white']">
|
|
|
+ <div style="display: flex">
|
|
|
+ <LabelTemplate title="包材备料"></LabelTemplate>
|
|
|
+ </div>
|
|
|
+ <div style="padding-left: 2vw; margin-top: 20px">
|
|
|
+ <el-table border :data="dataObj.bomColorList" size="small" :row-style="{ height: '35px' }" :cell-style="{ padding: '0' }">
|
|
|
+ <el-table-column label="序号" type="index" align="center" width="50" />
|
|
|
+ <el-table-column label="品号" prop="specCode" width="100" />
|
|
|
+ <el-table-column label="品名" prop="nameChinese" />
|
|
|
+ <el-table-column label="数量" align="right" width="60">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.singleQuantity">{{ Number(scope.row.singleQuantity) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="none" v-else>
|
|
|
+ <div style="text-align: center; padding: 8px">
|
|
|
+ <span style="font-size: 24px; padding-left: 8px">生产任务</span>
|
|
|
+ </div>
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
|
|
|
+ <el-form-item label="订单号" prop="contractCode">
|
|
|
+ <el-input v-model="queryParams.contractCode" placeholder="请输入订单号" size="small" @keyup.enter.native="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="SKU品号" prop="productColorCode">
|
|
|
+ <el-input v-model="queryParams.productColorCode" placeholder="请输入SKU品号" size="small" @keyup.enter.native="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="SKU品名" prop="productColorName">
|
|
|
+ <el-input v-model="queryParams.productColorName" placeholder="请输入SKU品名" size="small" @keyup.enter.native="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="small" @click="handleQuery" class="searchBtn">搜索</el-button>
|
|
|
+ <el-button size="small" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="height: calc(100vh - 110px - 40px - 50px - 30px - 48px - 48px); overflow-y: auto; padding: 0 8px">
|
|
|
+ <div v-for="(item, index) in quickList" :key="index" style="display: flex" v-db-click>
|
|
|
+ <div style="width: calc(100% - 100px); margin-top: 16px; box-shadow: 0px 0px 10px #ccc; padding: 20px; cursor: pointer" @click="clickQuick(item)">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <span>{{ item.contractCode }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" style="padding-left: 8px">
|
|
|
+ <span>{{ item.productColorCode }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" style="padding-left: 8px">
|
|
|
+ <span>{{ item.productColorName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" style="padding-right: 8px; text-align: right">
|
|
|
+ <el-button size="small" @click="scanTheCode(item)" class="searchBtn">模拟扫码</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 打印生产面单 -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible" title="打印生产面单" width="40%" append-to-body>
|
|
|
+ <el-form label-width="100px" :model="form" ref="form" :rules="rules">
|
|
|
+ <el-form-item label="工位：" prop="antno">
|
|
|
+ <el-input v-model="form.antno" placeholder="请输入"> </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-row style="text-align: center; margin-top: 30px">
|
|
|
+ <el-button size="small" @click="handleCancel">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="handleSubmit">保 存</el-button>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 验证密码 -->
|
|
|
+ <el-dialog title="验证密码" v-if="openCheckPWD" :visible.sync="openCheckPWD" width="30%" append-to-body>
|
|
|
+ <el-form ref="ruleForm" :model="pwd" label-width="110px" @submit.native.prevent>
|
|
|
+ <el-form-item label="密码:" prop="projectPrice" class="other-charges">
|
|
|
+ <el-input v-model="pwd" size="small" placeholder="请输入密码" @keyup.enter.native="clickPassword" />
|
|
|
+ </el-form-item>
|
|
|
+ <div style="width: 100%; text-align: center">
|
|
|
+ <el-button type="primary" @click="clickPassword" size="small" v-db-click>确 认</el-button>
|
|
|
+ <el-button size="small" @click="openCheckPWD = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import LabelTemplate from '@/components/LabelTemplate'
|
|
|
+import * as API from '@/api/shengde/productionSystem/productionOperation/pack'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import Utils from '@/util/transit'
|
|
|
+import BarCodeScan from '@/components/BarCodeScan/index'
|
|
|
+import { getUid } from '@/util/saas.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'pack',
|
|
|
+ components: { LabelTemplate, BarCodeScan },
|
|
|
+ computed: mapGetters(['userInfo']),
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pathPrefix: process.env.VUE_APP_IMG_URL,
|
|
|
+ station: null,
|
|
|
+ dialogVisible: false,
|
|
|
+ form: {
|
|
|
+ antno: '',
|
|
|
+ userId: '',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ antno: [{ required: true, message: '请输入工位', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ ws: null, //建立的webSocket连接
|
|
|
+ lockReconnect: false, //是否真正建立连接
|
|
|
+ timeout: 28 * 1000, //30秒一次心跳
|
|
|
+ timeoutObj: null, //心跳倒计时
|
|
|
+ serverTimeoutObj: null, //心跳倒计时
|
|
|
+ timeoutnum: null, //断开 重连倒计时
|
|
|
+ dataObj: {
|
|
|
+ contractProductId: '',
|
|
|
+ },
|
|
|
+ quickList: [],
|
|
|
+ openCheckPWD: false,
|
|
|
+ pwd: '',
|
|
|
+ rowData: {},
|
|
|
+ uuid: '',
|
|
|
+ status: true,
|
|
|
+ AKeyStatus: false,
|
|
|
+ queryParams: {
|
|
|
+ contractCode: '',
|
|
|
+ productColorName: '',
|
|
|
+ productColorCode: '',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.clickRefresh()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getDetails()
|
|
|
+ this.initWebSocket()
|
|
|
+ Utils.$on('webSocketClose', () => {
|
|
|
+ this.ws.close()
|
|
|
+ //清除时间
|
|
|
+ clearTimeout(this.timeoutObj)
|
|
|
+ clearTimeout(this.serverTimeoutObj)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleBarcode(val) {
|
|
|
+ API.packScanCode({ qrCode: val }).then()
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.clickRefresh()
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm('queryForm')
|
|
|
+ this.handleQuery()
|
|
|
+ },
|
|
|
+ initWebSocket() {
|
|
|
+ this.ws = new WebSocket(process.env.VUE_APP_MESSAGE_URL + '/saas-socket/saas/socket/websocket/notice?userId=' + this.userInfo.user_id + '_bz')
|
|
|
+ this.ws.onopen = this.onopen
|
|
|
+ this.ws.onmessage = this.onmessage
|
|
|
+ this.ws.onclose = this.onclose
|
|
|
+ this.ws.onerror = this.onerror
|
|
|
+ },
|
|
|
+ onopen() {
|
|
|
+ this.ws.send('ping')
|
|
|
+ //开启心跳
|
|
|
+ this.start()
|
|
|
+ },
|
|
|
+ onmessage(e) {
|
|
|
+ let data = JSON.parse(e.data)
|
|
|
+ console.log(data.data.details.rows, '包装websocket消息')
|
|
|
+ //过滤为websokect测试消息
|
|
|
+ if (data.data.details.rows[0] !== '测试发送消息') {
|
|
|
+ let obj = JSON.parse(data.data.details.rows[0]) //此次推送的整个对象
|
|
|
+ console.log(obj, '包装')
|
|
|
+ let value = JSON.parse(obj.notice.content)
|
|
|
+ if (obj.notice.msgType === 20 || obj.notice.msgType === 21 || obj.notice.msgType === 25) {
|
|
|
+ if (obj.notice.msgType === 21) {
|
|
|
+ this.AKeyStatus = false
|
|
|
+ this.uuid = value.code
|
|
|
+ } else if (obj.notice.msgType === 25) {
|
|
|
+ this.AKeyStatus = true
|
|
|
+ this.uuid = value.id
|
|
|
+ }
|
|
|
+ API.getPackingDetails({ id: value.id }).then((res) => {
|
|
|
+ this.dataObj = res.data.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.reset()
|
|
|
+ },
|
|
|
+ onclose() {
|
|
|
+ console.log('close')
|
|
|
+ this.reconnect()
|
|
|
+ },
|
|
|
+ onerror() {
|
|
|
+ console.log('error')
|
|
|
+ this.reconnect()
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ //重置心跳
|
|
|
+ let that = this
|
|
|
+ //清除时间
|
|
|
+ clearTimeout(that.timeoutObj)
|
|
|
+ //重启心跳
|
|
|
+ that.start()
|
|
|
+ },
|
|
|
+ start() {
|
|
|
+ var self = this
|
|
|
+ self.timeoutObj && clearTimeout(self.timeoutObj)
|
|
|
+ self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
|
|
|
+ self.timeoutObj = setTimeout(() => {
|
|
|
+ //这里发送一个心跳，后端收到后，返回一个心跳消息，
|
|
|
+ if (self.ws.readyState == 1) {
|
|
|
+ //如果连接正常
|
|
|
+ self.ws.send('heartCheck')
|
|
|
+ } else {
|
|
|
+ //否则重连
|
|
|
+ self.reconnect()
|
|
|
+ }
|
|
|
+ self.serverTimeoutObj = setTimeout(function () {
|
|
|
+ //超时关闭
|
|
|
+ console.log('包装超时')
|
|
|
+ self.ws.close()
|
|
|
+ setTimeout(() => {
|
|
|
+ self.reconnect()
|
|
|
+ }, 1000)
|
|
|
+ }, self.timeout)
|
|
|
+ }, self.timeout)
|
|
|
+ },
|
|
|
+ reconnect() {
|
|
|
+ //重新连接
|
|
|
+ let that = this
|
|
|
+ if (that.lockReconnect) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ that.lockReconnect = true
|
|
|
+ //没连接上会一直重连，设置延迟避免请求过多
|
|
|
+ that.timeoutnum && clearTimeout(that.timeoutnum)
|
|
|
+ that.timeoutnum = setTimeout(() => {
|
|
|
+ //新连接
|
|
|
+ that.initWebSocket()
|
|
|
+ that.lockReconnect = false
|
|
|
+ }, 5000)
|
|
|
+ },
|
|
|
+ handleOpen() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ if (this.station) {
|
|
|
+ this.getDetails()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDetails() {
|
|
|
+ API.getStation(this.userInfo.user_id).then((res) => {
|
|
|
+ this.form = res.data.data
|
|
|
+ this.station = res.data.data.antno
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.form = {
|
|
|
+ num: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ this.$refs['form'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.form.userId = this.userInfo.user_id
|
|
|
+ if (this.form.id) {
|
|
|
+ API.bindStation(this.form).then(() => {
|
|
|
+ this.station = this.form.antno
|
|
|
+ this.initWebSocket()
|
|
|
+ this.msgSuccess('修改成功！')
|
|
|
+ this.handleCancel()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ API.bindStation(this.form).then(() => {
|
|
|
+ this.station = this.form.antno
|
|
|
+ this.initWebSocket()
|
|
|
+ this.msgSuccess('保存成功！')
|
|
|
+ this.handleCancel()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openFile(path) {
|
|
|
+ window.open(path)
|
|
|
+ },
|
|
|
+ clickQuick(item) {
|
|
|
+ if (this.status) {
|
|
|
+ this.status = false
|
|
|
+ API.getPackagingDetails({ id: item.id }).then()
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.status = true
|
|
|
+ }, 2000)
|
|
|
+ },
|
|
|
+ clickSubmit() {
|
|
|
+ if (this.AKeyStatus) {
|
|
|
+ API.batchPackComplete({ id: this.uuid }).then(() => {
|
|
|
+ this.msgSuccess('包装完成')
|
|
|
+ this.dataObj = {
|
|
|
+ contractProductId: '',
|
|
|
+ }
|
|
|
+ this.clickRefresh()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ API.packWorkComplete({ qrCode: this.uuid }).then(() => {
|
|
|
+ this.msgSuccess('包装完成')
|
|
|
+ this.dataObj = {
|
|
|
+ contractProductId: '',
|
|
|
+ }
|
|
|
+ this.clickRefresh()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickRefresh() {
|
|
|
+ API.getInformationDetail(this.queryParams).then((res) => {
|
|
|
+ this.quickList = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickOneClickPacking(item) {
|
|
|
+ this.rowData = item
|
|
|
+ this.pwd = ''
|
|
|
+ this.openCheckPWD = true
|
|
|
+ },
|
|
|
+ clickPassword() {
|
|
|
+ if (this.pwd) {
|
|
|
+ if (this.pwd === 'sd2022') {
|
|
|
+ this.msgSuccess('验证成功')
|
|
|
+ API.getBatchPackagingDetails({ id: this.rowData.id }).then(() => {
|
|
|
+ this.clickRefresh()
|
|
|
+ this.openCheckPWD = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.msgInfo('密码验证错误')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.msgInfo('请输入密码')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickCancel() {
|
|
|
+ this.dataObj = {
|
|
|
+ contractProductId: '',
|
|
|
+ }
|
|
|
+ this.clickRefresh()
|
|
|
+ },
|
|
|
+ scanTheCode(item) {
|
|
|
+ API.packScanCode({ qrCode: item.id + '-' + getUid() }).then()
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep {
|
|
|
+ .el-button {
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .el-table .cell {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .el-card__body {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .one-click-packing {
|
|
|
+ width: 56px;
|
|
|
+ padding: 8px 0;
|
|
|
+ margin: 16px 0 0 16px;
|
|
|
+ border-radius: 50px !important;
|
|
|
+ }
|
|
|
+ .hideInput {
|
|
|
+ .el-input__inner {
|
|
|
+ height: 0px;
|
|
|
+ line-height: 0px;
|
|
|
+ border: 0 !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.main {
|
|
|
+ height: calc(100vh - 110px);
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+ background: #fff;
|
|
|
+ .btn {
|
|
|
+ padding: 0 8px;
|
|
|
+ // border: 1px solid lightskyblue;
|
|
|
+ border-radius: 1px;
|
|
|
+ // background-color: #e9f5fb;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ }
|
|
|
+ .btnWln {
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ }
|
|
|
+ .body {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ .left,
|
|
|
+ .right {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .white {
|
|
|
+ box-shadow: 0px 0px 10px #ccc;
|
|
|
+ }
|
|
|
+ .orange {
|
|
|
+ box-shadow: 0px 0px 10px #f59a23;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ width: 18%;
|
|
|
+ margin: 0px 10px;
|
|
|
+ height: calc(100vh - 210px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middle {
|
|
|
+ width: 52%;
|
|
|
+ margin: 0px 10px;
|
|
|
+ height: calc(100vh - 210px);
|
|
|
+ // height: calc(65vh - 210px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .detail {
|
|
|
+ margin-left: 20px;
|
|
|
+ .att {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 48%;
|
|
|
+ margin: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: calc(100vh - 210px);
|
|
|
+ // height: calc(65vh - 210px);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.none {
|
|
|
+ width: 60vw;
|
|
|
+ height: calc(100vh - 110px - 40px - 50px - 30px);
|
|
|
+ margin: auto;
|
|
|
+ // margin-top: 30px;
|
|
|
+}
|
|
|
+.searchBtn {
|
|
|
+ background: #20b2aa;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #20b2aa;
|
|
|
+}
|
|
|
+</style>
|
