LiLongLong
/
graphite_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

rebase master

feature/home
LiLongLong 6 months ago
parent
4c985e9df6
commit
573fe9b103
5 changed files with 185 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/arrow.svg
  2. 2
      src/assets/logo.svg
  3. 3
      src/assets/style/mixin.scss
  4. 144
      src/views/addLiquid/index.vue
  5. 117
      src/views/components/Header.vue

1
src/assets/arrow.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="23" height="15" viewBox="0 0 23 15"><g transform="matrix(0,-1,1,0,-15,15)"><path d="M12.4365,15C12.4365,15,15,17.37044,15,17.37044C15,17.37044,5.12696,26.5,5.12696,26.5C5.12696,26.5,15,35.629599999999996,15,35.629599999999996C15,35.629599999999996,12.4365,38,12.4365,38C12.4365,38,0,26.5,0,26.5C0,26.5,12.4365,15,12.4365,15C12.4365,15,12.4365,15,12.4365,15Z" fill-rule="evenodd" fill="#1989FA" fill-opacity="1"/></g></svg>

2
src/assets/logo.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="224" height="233" viewBox="0 0 224 233"><g><g><path d="M223.99979977416993,114.45162603759766C223.99979977416993,124.83402603759765,215.86279977416993,133.25062603759767,205.82579977416992,133.25062603759767C195.7877997741699,133.25062603759767,89.86419977416992,119.90242603759765,46.42679977416992,114.45162603759766C95.25419977416992,108.22022603759766,195.7877997741699,95.65262603759766,205.82579977416992,95.65262603759766C215.86279977416993,95.65264605499766,223.99979977416993,104.06923603759766,223.99979977416993,114.45162603759766Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M201.21678225097656,176.92624592285156C201.23438225097658,182.56134592285156,196.82298225097657,187.13904592285155,191.37518225097656,187.13904592285155C185.94078225097655,187.13904592285155,128.59708225097657,179.92384592285157,105.07118225097656,176.95904592285157C131.50778225097656,173.58095592285156,185.94078225097655,166.77894592285156,191.37518225097656,166.77894592285156C196.79818225097657,166.77890588795157,201.19928225097658,171.31673592285156,201.21678225097656,176.92624592285156Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M215.93901684570312,149.52852961425782C215.94201684570314,157.61312961425782,209.60701684570313,164.16892961425782,201.79101684570313,164.16892961425782C193.97901684570314,164.16892961425782,114.44741684570312,153.77242961425782,80.63601684570312,149.52852961425782C118.64531684570312,144.68120961425782,193.97901684570314,134.8947296142578,201.79101684570313,134.8947296142578C209.60501684570312,134.8947296142578,215.93901684570312,141.44651961425782,215.93901684570312,149.52852961425782Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M112.735,0.0000200174C33.3546,-0.0135318,-21.121,82.656,7.90892,159.078C36.9389,235.5,131.249,257.697,189.387,201.791C181.175,201.01,163.001,198.721,131.435,194.661L127.085,194.11C85.6178,216.585,34.3882,200.014,12.688,157.106C-9.01216,114.197,7.04277,61.2171,48.539,38.7996C90.0352,16.382,141.243,33.0249,162.887,75.9634C169.261,88.781,184.624,93.5998,196.807,86.6023C208.989,79.6049,213.157,63.5677,206.008,51.1954C185.072,19.1593,150.118,-0.0260227,112.735,0.0000200174Z" fill="#275EFB" fill-opacity="1"/></g></g></svg>

3
src/assets/style/mixin.scss
View File

@ -1 +1,2 @@
$textGray: #333;
$textGray: #333;
$addLiquidWidth: 410px;//加液配置 card宽度

144
src/views/addLiquid/index.vue
View File

@ -1,3 +1,143 @@
<template>
<div>溶液配置</div>
</template>
<div class="add_liquid_bottle">
<div class="add_liquid">
<div class="config_title">
<div class="config_name">
<div>1 硝酸</div>
<img :src="ArrowSvg" class="arrow_img"/>
</div>
</div>
<div class="bottle_ml">
<div class="liquid_pos">
<div class="contail_percentage"></div>
<div class="liquid_percent bottle_wd"></div>
<div class="percent_num">300ml</div>
</div>
<div class="ml_name">
300ml
</div>
</div>
</div>
<div class="add_liquid">
<div class="config_title">
<div class="config_name">
<div>1 硝酸</div>
<img :src="ArrowSvg" class="arrow_img"/>
</div>
</div>
<div class="bottle_ml">
<div class="liquid_pos">
<div class="contail_percentage"></div>
<div class="liquid_percent bottle_wd"></div>
<div class="percent_num">300ml</div>
</div>
<div class="ml_name">
300ml
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import ArrowSvg from '@/assets/arrow.svg'
</script>
<style lang="scss" scoped>
@use "@/assets/style/mixin.scss" as *;
.add_liquid_bottle{
display: flex;
}
.add_liquid{
background: #F4F9FF;
width: $addLiquidWidth;
height: 430px;
border:1px solid #275EFB;
margin-left: 135px;
margin-top: 160px;
border-radius: 20px;
.config_title{
width: $addLiquidWidth;
height: 80px;
background: rgba(25, 137, 250, 0.1216);
padding-top: 16px;
.config_name{
width: 248px;
height: 50px;
background: #FFFFFF;
margin-left: 80px;
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
.arrow_img{
width: 15px;
height: 23px;
}
}
}
.bottle_ml{
.liquid_pos{
position: relative;
width: 162px;
height: 228px;
margin-top: 36px;
margin-left: 120px;
display: flex;
justify-content: center;
align-items: center;
.bottle_wd{
height: 30%;
background-color:red;
width: 162px;
}
}
.liquid_status{
height: 29px;
font-family: Source Han Sans;
font-size: 30px;
font-weight: 500;
color: #40474E;
padding-top: 19px;
}
.contail_percentage{
position: absolute;
width: 162px;
height: 228px;
background-image: url('@/assets/container.svg');
background-size: cover;
background-position: center;
z-index: 1;
border-radius: 10px;
}
.liquid_percent {
position: absolute;
bottom: 0;
width: 83px;
background-color: blue;
opacity: 0.5;
z-index: 2;
border-radius: 0 0 10px 10px;
}
}
.percent_num{
font-size: 30px;
position: relative;
z-index: 2;
}
.ml_name{
width: 174px;
height: 50px;
background: #FFFFFF;
margin-left: 120px;
text-align: center;
margin-top: 15px;
border-radius: 195px;
}
}
</style>

117
src/views/components/Header.vue
View File

@ -1,111 +1,67 @@
<template>
<div class="header">
<div class="header_logo">
<img :src="logo"/>
<img :src="logo" class="logo"/>
<div>长春黄金研究院有限公司</div>
</div>
<!--时间区-->
<div class="header_menu">
<div class="header_time">
{{ currentTime }}
</div>
<!--指令区-->
<div class="header_ins">
<van-icon name="discount-o" size="30" style="padding:5px"/>
<span class="ins_text text_size">等待指令</span>
</div>
<div>
<van-popover v-model:show="showContainerPopover">
<template #reference>
<div class="header_container">
<div class="circle" style="background-color: #F2652D;"></div>
<div class="waste_status text_size" style="color:#F2652D">碱中和容器余量低</div>
<div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
</div>
</template>
<div>
<Liquid></Liquid>
</div>
</van-popover>
</div>
<div>
<van-popover v-model:show="showWastePopover">
<template #reference>
<div class="header_container">
<div class="circle"></div>
<div class="waste_status text_size">溶液正常</div>
<div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
</div>
</template>
<div>
<Liquid></Liquid>
</div>
</van-popover>
</div>
<div class="header_user">
<van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" size="70"/>
<div style="font-size: 30px;">Admin</div>
<img :src="AvatarSvg" width="40px" height="40px"/>
<div class="user_name">Admin</div>
</div>
</div>
</template>
<script lang="ts" setup>
import logo from '@/assets/logo.png'
import logo from '@/assets/logo.svg'
import AvatarSvg from '@/assets/avatar.svg'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {eventBus} from '@/eventBus'
import Liquid from './Liquid.vue'
import { getFormattedDateTime } from '@/utils'
const router = useRouter()
const menus = [{
text: '菜单',
value: 0
},{
text: '测试页面',
value: 1
}]
const menuId = ref(0)
const menuList = ref(menus)
const time = getFormattedDateTime()
const currentTime = ref(time)
const showContainerPopover = ref(false)
const showWastePopover = ref(false)
onMounted(()=>{
//测试页面返回时，需要调整菜单
eventBus.on('menuId', (value:number)=>{
menuId.value = value
})
})
const onHandleMenu = () => {
//跳转测试页面
if(menuId.value === 0){
router.push('/')
}
if(menuId.value === 1){
router.push('/test')
}
}
</script>
<style scoped>
<style lang="scss" scoped>
@use "@/assets/style/mixin.scss" as *;
.header{
width: 100%;
display: flex;
align-items: center;
background: #e9e9e9;
align-items: center;
height: var(--headerHeight);
.header_logo{
padding:10px 10px;
display: flex;
font-size: 36px;
align-items: center;
width: 700px;
color: #8799AB;
gap: 5px;
padding-left: 50px;
.logo{
height:85px;
width:85px;
}
}
.header_menu{
margin-left:12px;
width: 361px;
padding-top:5px;
.header_time{
width: 375px;
height: 80px;
font-size: 28px;
.header_menu_item{
color:#FFFFFF
}
display: flex;
align-items: center;
margin-left: 54%;
background: white;
justify-content: center;
border-radius: 10px;
}
.header_ins{
@ -140,10 +96,15 @@
.header_user{
display: flex;
align-items: center;
width: 25%;
justify-content: flex-end;
padding-right: 20px;
gap: 5px;
margin-left: 30px;
}
.user_name{
font-size: 34px;
color: #393F46;
}
}

Write Preview
Loading…
Cancel
Save