162 lines
3.4 KiB
Vue
162 lines
3.4 KiB
Vue
<template>
|
||
<view>
|
||
<view class="cont">
|
||
<view class="title" @click="clk">
|
||
<view></view>
|
||
采购单
|
||
</view>
|
||
<view class="boxcen">
|
||
<view class="boxa">
|
||
<view class="bianj" v-if="active==1">
|
||
<image src="/static/index/card/bj.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="jszl guodu" :class="active==1?'':'jsh0'" @click.stop>
|
||
温馨提示：点击生成采购单
|
||
</view>
|
||
|
||
<view :class="active>=1?'act':''">
|
||
<image src="/static/three/cgd.png" v-if="active>=1" mode="aspectFill"></image>
|
||
<image src="/static/three/cgd1.png" v-else mode="aspectFill"></image>
|
||
</view>
|
||
<text>采购单</text>
|
||
</view>
|
||
<text class="jiao">▶</text>
|
||
<view class="boxa">
|
||
<view :class="active>=2?'act':''">
|
||
<image src="/static/three/sxd.png" v-if="active>=2" mode="aspectFill"></image>
|
||
<image src="/static/three/sxd1.png" v-else mode="aspectFill"></image>
|
||
</view>
|
||
<text>随行单</text>
|
||
</view>
|
||
<text class="jiao">▶</text>
|
||
<view class="boxa">
|
||
<view :class="active==3?'act':''">
|
||
<image src="/static/three/jh.png" v-if="active==3" mode="aspectFill"></image>
|
||
<image src="/static/three/jh1.png" v-else mode="aspectFill"></image>
|
||
</view>
|
||
<text>拣货</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
|
||
const active = ref(0)
|
||
const clk = () =>{
|
||
active.value++
|
||
if(active.value>3){
|
||
active.value = 0;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.cont{
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 1.7vw 2.3vw;
|
||
.boxcen{
|
||
width: 50vw;
|
||
height: 20vw;
|
||
margin: 18vw auto 0;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.jiao{
|
||
font-size: 1.4vw;
|
||
color: #C2C3CA;
|
||
margin-top: -3vw;
|
||
}
|
||
.act{
|
||
background: #E1F0FF !important;
|
||
border: 1px solid #1083F8 !important;
|
||
}
|
||
.boxa{
|
||
width: 7.2vw;
|
||
height: 10.2vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
|
||
.jszl {
|
||
width: 43vw;
|
||
height: 7vw;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(136, 148, 167, 0.19);
|
||
border-radius: 2.2vw;
|
||
position: absolute;
|
||
top: 12vw;
|
||
left: 0;
|
||
z-index: 10;
|
||
padding: 2vw;
|
||
overflow: hidden;
|
||
font-size: 1.3vw;
|
||
color: #3F86CF;
|
||
border: 1px solid #D2D2D2;
|
||
}
|
||
.jsh0 {
|
||
height: 0vw !important;
|
||
padding: 0 2vw !important;
|
||
border: 0px solid #D2D2D2;
|
||
}
|
||
.bianj {
|
||
position: absolute;
|
||
width: 2.2vw;
|
||
height: 1.1vw;
|
||
top: 11.2vw;
|
||
left: 3.1vw;
|
||
z-index: 11;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
text{
|
||
font-size: 1.6vw;
|
||
color: #555555;
|
||
margin-top: 1.4vw;
|
||
}
|
||
view{
|
||
width: 7.2vw;
|
||
height: 7.2vw;
|
||
background: #F1F1F1;
|
||
border-radius: 1.4vw;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image{
|
||
width: 3.8vw;
|
||
height: 3.8vw;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.title{
|
||
font-size: 1.7vw;
|
||
color: #222222;
|
||
display: flex;
|
||
align-items: center;
|
||
view{
|
||
width: 0.5vw;
|
||
height: 1.4vw;
|
||
background: radial-gradient( 0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
|
||
border-radius: 0.2vw;
|
||
margin-right: 1vw;
|
||
}
|
||
}
|
||
}
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
</style>
|