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

优化自适应为rem

feature/home
LiLongLong 6 months ago
parent
e2a0afc1fe
commit
f39be46f06
11 changed files with 117 additions and 138 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. 47
      src/components/OverlayModal.vue
  2. 3
      src/services/axios.ts
  3. 8
      src/views/addLiquid/index.vue
  4. 22
      src/views/components/Footer.vue
  5. 46
      src/views/components/Header.vue
  6. 12
      src/views/components/Menu.vue
  7. 2
      src/views/components/menu.ts
  8. 66
      src/views/graphite/components/HeatPosition.vue
  9. 25
      src/views/graphite/components/TakePickture.vue
  10. 22
      src/views/graphite/index.vue
  11. 2
      vite.config.ts

47
src/components/OverlayModal.vue
View File

@ -1,51 +1,28 @@
<template>
<van-overlay :show="visible" style="z-index: 999;">
<div v-if="visible" class="overlay">
<div class="overlay_modal" >
<slot></slot>
</div>
</van-overlay>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from "vue"
const emits = defineEmits(['confirm', 'changeVisible'])
const props = defineProps({
title:{
type: String,
default: ''
},
defineProps({
visible:{
type: Boolean,
default: false
},
list:{
type: Array,
default: ()=>[]
},
width:{
type:String,
default:'32rem'
},
height:{
type:String,
default:'25rem'
},
item:{
type: Object
}
})
const columnsList = ref<any>(props.list)
const onSubmit = () => {
emits('confirm')
}
const onCancel = ()=> {
emits("changeVisible", false)
}
</script>
<style scoped>
.overlay{
background: rgba(0, 0, 0, .7);
width: 87.5rem;
height: 57.5rem;
position: absolute;
top: 0px;
left: 0px;
z-index: 999
}
.overlay_modal{
display: flex;
justify-content: center;

3
src/services/axios.ts
View File

@ -1,7 +1,8 @@
import { eventBus } from "@/eventBus";
import axios, { AxiosHeaders } from "axios";
const url = `http://${import.meta.env.VITE_API_HOST}:${import.meta.env.VITE_API_PORT}`;
// const url = `http://${import.meta.env.VITE_API_HOST}:${import.meta.env.VITE_API_PORT}`;
const url = 'http://192.168.1.119:8080'
const apiClient = axios.create({
baseURL: url, // 设置请求的根路径

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

@ -134,10 +134,10 @@
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
gap: 1.625rem;
.arrow_img{
width: 15px;
height: 23px;
width: .5rem;
height: .75rem;
}
}
}
@ -148,7 +148,7 @@
position: relative;
width: 5.125rem;
height: 7.25rem;
margin-top: 36px;
margin-top: 1.125rem;
margin-left: 3.75rem;
display: flex;
justify-content: center;

22
src/views/components/Footer.vue
View File

@ -51,38 +51,38 @@ const showWastePopover = ref(false)
align-items: center;
border-radius: 5px;
background: #FFFFFF;
height: 80px;
width: 1268px;
margin-left: 380px;
height: 40px;
width: 39.625rem;
margin-left: 11.875rem;
}
.footer_waste{
display: flex;
align-items: center;
border-radius: 5px;
width: 430px;
height: 80px;
width: 13.4375rem;
height: 2.5rem;
background: #FFFFFF;
margin-left: 10px;
}
.footer_normal{
margin-left: 100px;
margin-left: 3.125rem;
}
.text_size{
font-size:30px;
font-size:1rem;
padding-right: 5px;
}
.footer_container{
display: flex;
align-items: center;
border-radius: 5px;
width: 500px;
height: 80px;
width: 15.625rem;
height: 2.5rem;
background: #FFFFFF;
.circle {
width: 30px;
height: 30px;
width: 1rem;
height: 1rem;
background-color: green;
border-radius: 50%;
margin-left: 10px;

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

@ -39,23 +39,23 @@
height: var(--headerHeight);
.header_logo{
display: flex;
font-size: 36px;
font-size: 1.125rem;
align-items: center;
width: 700px;
width: 21.875rem;
color: #8799AB;
gap: 5px;
padding-left: 50px;
padding-left: 1.5625rem;
.logo{
height:85px;
width:85px;
height:2.75rem;
width:2.625rem;
}
}
.header_time{
width: 375px;
height: 80px;
font-size: 28px;
width: 11.875rem;
height: 2.5rem;
font-size: .875rem;
display: flex;
align-items: center;
margin-left: 54%;
@ -68,18 +68,18 @@
display: flex;
align-items: center;
border-radius: 5px;
width: 444px;
height: 80px;
width: 13.875rem;
height: 2.5rem;
background: #FFFFFF;
}
.header_container{
margin-left: 10px;
margin-left: 3.125rem;
display: flex;
align-items: center;
border-radius: 5px;
width: 500px;
height: 80px;
width: 15.625rem;
height: 2.5rem;
background: #FFFFFF;
.waste_status{
padding:5px 5px;
@ -98,29 +98,29 @@
align-items: center;
justify-content: flex-end;
gap: 5px;
margin-left: 30px;
margin-left: .9375rem;
}
.user_name{
font-size: 34px;
font-size: 1rem;
color: #393F46;
}
}
.circle {
width: 30px;
height: 30px;
width: .9375rem;
height: .9375rem;
background-color: green;
border-radius: 50%;
margin-left: 10px;
margin-left: .3125rem;
}
:deep(.van-dropdown-menu__bar){
background-color: #1871F8;
border-radius: 5px;
height: 30px;
width: 90px;
height: .1rem;
width: 2.875rem;
.van-ellipsis{
color:white;
}
@ -128,12 +128,12 @@
}
:deep(.van-dropdown-item__content){
width: 150px;
margin-left: 170px;
width: 4.75rem;
margin-left: 5.375rem;
}
.text_size{
font-size:30px;
font-size:1rem;
padding-right: 5px;
}

12
src/views/components/Menu.vue
View File

@ -63,15 +63,15 @@
.sidebar{
width: calc(var(--menuAreaWidth) - 2.5rem);
/* padding: 0 1.125rem; */
font-size: 30px
font-size: 1rem
}
.menu{
width: var(--menuAreaWidth);
}
.menn_text{
font-size: 30px;
margin-top:20px;
font-size: 1rem;
margin-top:.625rem;
}
.van-sidebar {
@ -82,7 +82,7 @@
.menn_btn{
border-radius: 10px;
height: 100px;
height: 3.125rem;
display: flex;
align-items: center;
@ -95,8 +95,8 @@
}
.menu_icon{
width: 80px;
height: 80px;
width: 2.5rem;
height: 2.5rem;
}
</style>

2
src/views/components/menu.ts
View File

@ -1,6 +1,6 @@
export const menuIcon = [{
id: 0,
name: '实验操作',
name: '任务操作',
s_icon: '/src/assets/menuIcon/s_home.svg',
n_icon: '/src/assets/menuIcon/n_home.svg',
path: '/graphite',

66
src/views/graphite/components/HeatPosition.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="heat_main" @click="onSelectTray" :style="`${posIndex === currentIndex && isSelect ? 'border:7px solid #275EFB' : ''}`">
<div class="heat_main" :style="`${posIndex === currentIndex && isSelect ? 'border:7px solid #275EFB' : ''}`">
<section class="heat_pos_text">
<div class="pos_text">{{ `A-${posIndex || ''}` }}</div>
<div class="pos_text pos_state">已放置</div>
</section>
<section class="heat_pos" :style="`background:${(trayInfo?.id) ? '#384D5D':''}`">
<section class="heat_pos" :style="`background:${(trayInfo?.id) ? '#384D5D':''}`" @click.stop="onSelectTray">
<div
v-for="(isActive, index) in ballStates"
:key="index"
@ -141,21 +141,21 @@
@use "@/assets/style/mixin.scss" as *;
.heat_main{
border: 1px solid #E9F3FF;
width: 366px;
height: 580px;
width: 11.5rem;
height: 18.125rem;
border-radius: 20px;
background: #E9F3FF;
margin-top: 110px;
margin-top: 3.5rem;
}
.heat_pos_text{
display: flex;
height: 55px;
padding-left: 29px;
padding-right: 23px;
height: 1.75rem;
padding-left: .875rem;
padding-right: .75rem;
.pos_text{
font-size: 26px;
font-size: .8125rem;
font-weight: 500;
line-height: normal;
display: flex;
@ -214,8 +214,8 @@
}
.inner-circle {
border-radius: 50%;
width: 50px;
height: 50px;
width: 1.625rem;
height: 1.625rem;
background-color: rgb(212, 212, 212);
}
.heat_footer{
@ -224,77 +224,77 @@
margin-top: 10px;
margin-left: 5px;
.heat_temperature{
height: 46px;
width: 330px;
height: 1.625rem;
width: 10.375rem;
background: #FFFFFF;
box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-left: .375rem;
.target_temp{
color: #384D5D;
font-size: 22px;
font-size: .75rem;
}
.heating{
color: #FE0A0A;
font-size: 28px;
margin-left: 70px;
font-size: .875rem;
margin-left: 2.25rem;
}
}
.temp_text{
width: 109px;
height: 52px;
width: 6.625rem;
height: 1.625rem;
opacity: 1;
font-family: Source Han Sans;
font-size: 36px;
font-size: 1.125rem;
font-weight: bold;
line-height: normal;
display: flex;
align-items: center;
color: #4D6882;
padding-top: 70px;
margin-left: 25px;
padding-top: 2.25rem;
margin-left: .875rem;
}
}
.heat_overlay{
border: 1px solid #E9F3FF;
width: 300px;
height: 492px;
width: 9.375rem;
height: 15.5rem;
border-radius: 20px;
margin-top: 100px;
margin-top: 3.125rem;
position: absolute;
background: #d3d3d3;
margin-top: -335px;
margin-top: -10.375rem;
opacity: 0.8;
.heat_loading{
margin: 123px;
margin: 3.875rem;
}
}
.heat_choose{
position: absolute;
margin-left: 215px;
margin-left: 6.75rem;
z-index: 99;
margin-top: -30px;
margin-top: -.9375rem;
.btn{
width: 120px;
height: 60px;
font-size: 20px;
width: 3.75rem;
height: 1.875rem;
font-size: .625rem;
color:#1989FA;
background: #ffffff;
}
}
.formula_picker{
width: 800px;
width: 25rem;
margin: 20% 30%;
}

25
src/views/graphite/components/TakePickture.vue
View File

@ -16,38 +16,39 @@
</script>
<style scoped>
.graphite_right{
width: 1040px;
width: 32.5rem;
display: flex;
justify-content: center;
}
.picture{
height: 726px;
width: 911px;
height: 22.625rem;
width: 28.5rem;
background-image: url('@/assets/picture.svg');
background-repeat: no-repeat;
margin-top:100px;
background-size: contain;
margin-top:3.25rem;
}
.area{
background: rgba(255, 255, 255, 0.5);
font-size: 26px;
width: 911px;
height: 126px;
font-size: .875rem;
width: 28.5rem;
height: 4rem;
position: absolute;
margin-top: 600px;
margin-top: 18.75rem;
.area_btn{
display: flex;
justify-content: center;
align-items: center;
height: 126px;
font-size: 42px;
height: 3.875rem;
font-size: 1.375rem;
font-weight: bold;
color: #FFFFFF;
gap:10px;
.photo_icon{
width: 51px;
height: 38px;
width: 1.625rem;
height: 1.125rem;
}
}
}

22
src/views/graphite/index.vue
View File

@ -19,45 +19,45 @@
<div class="graphite_btn">
<div><van-button size="large" class="btn_size open">开门</van-button></div>
<van-row class="graphite_operate">
<van-col span="11">
<van-col class="w-56">
<van-button size="large" class="btn_size">开始任务</van-button>
</van-col>
<van-col span="11">
<van-col class="w-[13.5rem]">
<van-button size="large" class="btn_size">结束任务</van-button>
</van-col>
</van-row>
<van-row class="graphite_operate">
<van-col span="11">
<van-col class="w-56">
<van-button size="large" class="btn_size" @click="onChooseCaft">选择工艺</van-button>
</van-col>
<van-col span="11">
<van-col class="w-[13.5rem]">
<van-button size="large" class="btn_size">执行工艺</van-button>
</van-col>
</van-row>
<van-row class="graphite_operate">
<van-col span="11">
<van-col class="w-56">
<van-button size="large" class="btn_size" @click="onAddLiquid">添加溶液</van-button>
</van-col>
<van-col span="11">
<van-col class="w-[13.5rem]">
<van-button size="large" class="btn_size">摇匀</van-button>
</van-col>
</van-row>
<van-row class="graphite_operate">
<van-col style="width:306px">
<van-col class="w-36">
<van-button size="large" class="btn_size">移至加热</van-button>
</van-col>
<van-col span="7">
<van-button size="large" class="btn_size">移至加液</van-button>
</van-col>
<van-col span="7">
<van-col class="w-[9rem]">
<van-button size="large" class="btn_size">移至特殊</van-button>
</van-col>
</van-row>
<van-row class="graphite_operate">
<van-col span="11">
<van-col class="w-56">
<van-button size="large" class="btn_size">开始加热</van-button>
</van-col>
<van-col span="11">
<van-col class="w-[13.5rem]">
<van-button size="large" class="btn_size">抬起托盘</van-button>
</van-col>
</van-row>
@ -81,7 +81,7 @@
import { ref, onMounted } from 'vue';
import {HeatPosition, TakePickture, AddLiquid} from './components'
import OverlayModal from '@/components/OverlayModal.vue';
import CraftList from './components/CraftList.vue';
import CraftList from '@/views/graphite/components/CraftList.vue'
const heatList:any = ref([{
id:1,
name:'A-1',

2
vite.config.ts
View File

@ -18,7 +18,7 @@ export default defineConfig({
port: 5174,
proxy: {
'/api': {
target: 'http://127.0.0.1:8080',
target: 'http://192.168.1.119:8080',
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, ''),
},

Write Preview
Loading…
Cancel
Save