diff --git a/src/components/container/Item/index.vue b/src/components/container/Item/index.vue
index 168e8fd..a985816 100644
--- a/src/components/container/Item/index.vue
+++ b/src/components/container/Item/index.vue
@@ -82,110 +82,96 @@ const onSolutionChange = async () => {
 }
 </script>
 
-<template>
-  <div class="liquied-item">
-    <div class="header">
-      <div class="solution-select">
-        <el-select v-model="solutionInfo.solutionId" placeholder="请选择酸液" style="width: 80%" @change="onSolutionChange">
-          <el-option v-for="item in solutionStore.solutionList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </div>
-    </div>
-    <div class="content">
-      <div class="bottle_base">
-        <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
-      </div>
-      <div class="bottle" :style="solutionStyle">
-        <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-content">
-        <span>{{ solutionInfo.capacityTotal }}mL</span>
-      </div>
-      <div class="footer-edit">
-        <span>已使用</span>
-        <el-input v-model="solutionInfo.capacityUsed" type="number" @blur="onInputBlur">
-          <template #append>
-            mL
-          </template>
-        </el-input>
-      </div>
-    </div>
-  </div>
+<template lang="pug">
+  .liquid-item
+    .header
+      .solution-select
+        el-select(v-model="solutionInfo.solutionId", placeholder="请选择酸液", style="width: 80%", @change="onSolutionChange")
+          el-option(v-for="item in solutionStore.solutionList", :key="item.id", :label="item.name", :value="item.id")
+    .content
+      .bottle_base
+        img.content-img(src="@/assets/images/liquied/liquied_bottle.svg", alt="chemical-bottle")
+      .bottle(:style="solutionStyle")
+        img.content-img(src="@/assets/images/liquied/liquied_bottle.svg", alt="chemical-bottle")
+    .footer
+      .footer-content
+        span {{ solutionInfo.capacityTotal }}mL
+      .footer-edit
+        span 已使用
+        el-input(v-model="solutionInfo.capacityUsed", type="number", @blur="onInputBlur")
+          template(#append)
+            | mL
 </template>
 
-<style scoped>
-.liquied-item {
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  width: 200px;
-  height: 300px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-}
-.content{
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
-.bottle_base{
-  position: relative;
-}
-.bottle {
-  position: absolute;
-}
-.header {
-  display: flex;
-  align-items: center;
-  background: rgba(25, 137, 250, 0.1216);
-  justify-content: center;
-  border-radius: 10px 10px 0 0;
-  padding:10px;
-  width: 100%;
-}
-.content-img{
-  height: 150px;
-  margin: 10px;
-}
-.footer-content{
-  display: flex;
-  justify-content: center;
-}
-.footer-edit {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 10px 0;
-  .el-input {
-    margin-left: 10px;
-    width: 120px;
-  }
-}
-.checked {
-  text-decoration: line-through;
-}
-.solution-select{
-  display:flex;
-  width: 100%;
-  height: 25px;
- justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-}
-.add-icon{
-  margin-right: -4px;
-}
-.button-icon{
-  height: 25px;
-  width: 25px;
-  margin: 3px;
-}
-.radio-marge{
-  margin: 10px;
-  border: 1px solid #e0e0e0;
-}
+<style lang="stylus" scoped>
+.liquid-item
+  border 1px solid #ccc
+  border-radius 10px
+  width 200px
+  height 300px
+  text-align center
+  display flex
+  flex-direction column
+  align-items center
+  justify-content space-between
+
+.content
+  position relative
+  display flex
+  justify-content center
+
+.bottle_base
+  position relative
+
+.bottle
+  position absolute
+
+.header
+  display flex
+  align-items center
+  background rgba(25, 137, 250, 0.1216)
+  justify-content center
+  border-radius 10px 10px 0 0
+  padding 10px
+  width 100%
+
+.content-img
+  height 150px
+  margin 10px
+
+.footer-content
+  display flex
+  justify-content center
+
+.footer-edit
+  display flex
+  justify-content space-around
+  align-items center
+  padding 10px 0
+  .el-input
+    margin-left 10px
+    width 120px
+
+.checked
+  text-decoration line-through
+
+.solution-select
+  display flex
+  width 100%
+  height 25px
+  justify-content center
+  align-items center
+  border-radius 5px
+
+.add-icon
+  margin-right -4px
+
+.button-icon
+  height 25px
+  width 25px
+  margin 3px
+
+.radio-marge
+  margin 10px
+  border 1px solid #e0e0e0
 </style>
diff --git a/src/components/solution/Edit/index.vue b/src/components/solution/Edit/index.vue
index db15a12..0a9685d 100644
--- a/src/components/solution/Edit/index.vue
+++ b/src/components/solution/Edit/index.vue
@@ -5,9 +5,9 @@ import { inject, ref } from 'vue'
 
 const emits = defineEmits(['ok', 'cancel'])
 
-const data = inject('currentData')
+const data = inject<Solution.SolutionItem>('currentData')
 
-const form = ref<Solution.SolutionItem>({ ...data.value })
+const form = ref<Solution.SolutionItem>({ ...(data as any)?.value })
 const formRef = ref()
 
 const rules = {
@@ -22,7 +22,7 @@ const okHandle = async () => {
     if (!valid) {
       return
     }
-    if (data.value.id) {
+    if (data?.value.id) {
       await editSols(form.value)
     }
     else {
@@ -40,18 +40,14 @@ const cancel = () => {
 }
 </script>
 
-<template>
-  <FtDialog visible :title="data.id ? '编辑' : '新增'" width="30%" :ok-handle="okHandle" @cancel="cancel">
-    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
-      <el-form-item label="溶液名称" prop="name">
-        <el-input v-model="form.name" placeholder="请输入溶液名称" />
-      </el-form-item>
-    </el-form>
-  </FtDialog>
+<template lang="pug">
+  FtDialog(visible :title="data?.id ? '编辑' : '新增'" width="30%" :ok-handle="okHandle" @cancel="cancel")
+    el-form(ref="formRef" label-width="auto" :model="form" :rules="rules")
+      el-form-item(label="溶液名称" prop="name")
+        el-input(v-model="form.name" placeholder="请输入溶液名称")
 </template>
 
-<style scoped lang="scss">
-.el-tag {
-  margin-right: 5px;
-}
+<style lang="stylus" scoped>
+.el-tag
+  margin-right 5px
 </style>
diff --git a/src/views/container/index.vue b/src/views/container/index.vue
index 4f8781e..283f805 100644
--- a/src/views/container/index.vue
+++ b/src/views/container/index.vue
@@ -32,7 +32,6 @@ const queryContainerList = () => {
       const list: Container.ContainerItem[] = res
       const solutionList: Container.ContainerItem[] = []
       list.forEach((item, index) => {
-        // 只有8种，不会多也不会少, 多的不要
         if (index < 8) {
           solutionList.push({
             ...item,
@@ -46,25 +45,17 @@ const queryContainerList = () => {
 }
 </script>
 
-<template>
-  <div class="liquid-container">
-    <liquidItem
-      v-for="(item, index) in chemicalList"
-      :key="item.id"
-      :item-index="index"
-      :solution-item="item"
-      @ok="queryContainerList"
-    />
-  </div>
+<template lang="pug">
+  div.liquid-container
+    liquidItem(v-for="(item, index) in chemicalList", :key="item.id", :item-index="index", :solution-item="item", @ok="queryContainerList")
 </template>
 
-<style>
-.liquid-container {
-  display: grid;
-  grid-template-columns: repeat(4, auto);
-  grid-template-rows: repeat(1, auto);
-  gap: 10px ;
-  justify-content: center;
-  align-items: center;
-}
+<style lang="stylus" scoped>
+.liquid-container
+  display: grid
+  grid-template-columns: repeat(4, auto)
+  grid-template-rows: repeat(1, auto)
+  gap: 10px
+  justify-content: center
+  align-items: center
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0243c44..18dc4ab 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -41,76 +41,58 @@ const loginHandle = async () => {
 }
 </script>
 
-<template>
-  <div class="login-box">
-    <div class="login-box-content">
-      <img :src="logo" alt="">
-      <div class="title">
-        长春黄金研究院有限公司
-      </div>
-      <el-form ref="formRef" :model="sys.loginForm" :rules="rules" style="width: 100%">
-        <div class="input-title">
-          用户名
-        </div>
-        <el-form-item>
-          <el-input v-model="sys.loginForm.username" size="large" placeholder="请输入用户名">
-            <template #prepend>
-              <img class="input-icon" :src="user" alt="">
-            </template>
-          </el-input>
-        </el-form-item>
-        <div class="input-title">
-          密码
-        </div>
-        <el-form-item>
-          <el-input v-model="sys.loginForm.password" size="large" placeholder="请输入密码" type="password">
-            <template #prepend>
-              <img class="input-icon" :src="password" alt="">
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <ft-button type="primary" style="width: 100%; margin: 20px 0 0;" :click-handle="loginHandle">
-            登录
-          </ft-button>
-        </el-form-item>
-      </el-form>
-    </div>
-  </div>
+<template lang="pug">
+  .login-box
+    .login-box-content
+      img(:src="logo", alt="")
+      .title 长春黄金研究院有限公司
+      el-form(ref="formRef", :model="sys.loginForm", :rules="rules", style="width: 100%")
+        .input-title 用户名
+        el-form-item
+          el-input(v-model="sys.loginForm.username", size="large", placeholder="请输入用户名")
+            template(#prepend)
+              img.input-icon(:src="user", alt="")
+        .input-title 密码
+        el-form-item
+          el-input(v-model="sys.loginForm.password", size="large", placeholder="请输入密码", type="password")
+            template(#prepend)
+              img.input-icon(:src="password", alt="")
+        el-form-item
+          ft-button(type="primary", style="width: 100%; margin: 20px 0 0;", :click-handle="loginHandle")
+            | 登录
 </template>
 
-<style scoped lang="scss">
-.login-box {
-  background: url("assets/images/login.svg") no-repeat center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .login-box-content {
-    padding: 50px 50px;
-    background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%);
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-    img {
-      width: 50px;
-    }
-    .title{
-      color: #8799AB;
-      font-weight: 500;
-      font-size: 18px;
-      margin: 15px 0 30px;
-    }
-  }
-}
-.input-icon {
-  width: 15px !important;
-}
-.input-title {
-  font-size: 14px;
-  color: #2C3E59;
-  margin-bottom: 10px;
-}
+<style lang="stylus" scoped>
+.login-box
+  background url("assets/images/login.svg") no-repeat center
+  display flex
+  justify-content center
+  align-items center
+
+  .login-box-content
+    padding 50px 50px
+    background linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%)
+    border-radius 10px
+    display flex
+    flex-direction column
+    justify-content center
+    align-items center
+    box-shadow 0 0 10px rgba(0, 0, 0, 0.05)
+
+    img
+      width 50px
+
+    .title
+      color #8799AB
+      font-weight 500
+      font-size 18px
+      margin 15px 0 30px
+
+.input-icon
+  width 15px !important
+
+.input-title
+  font-size 14px
+  color #2C3E59
+  margin-bottom 10px
 </style>
diff --git a/src/views/solution/index.vue b/src/views/solution/index.vue
index a1d556b..4c042c6 100644
--- a/src/views/solution/index.vue
+++ b/src/views/solution/index.vue
@@ -87,26 +87,8 @@ const btnList = [
 ]
 </script>
 
-<template>
-  <div>
-    <ft-table ref="tableRef" has-page has-header :columns="columns" :btn-list="btnList" :get-data-fn="getSolsList" @add="addSolution" @edit="editSolution" @del="delSolution" />
-    <Edit v-if="visible" @ok="okHandle" @cancel="visible = false" />
-  </div>
+<template lang="pug">
+  div
+    ft-table(ref="tableRef", has-page, has-header, :columns="columns", :btn-list="btnList", :get-data-fn="getSolsList", @add="addSolution", @edit="editSolution", @del="delSolution")
+    Edit(v-if="visible", @ok="okHandle", @cancel="visible = false")
 </template>
-
-<style scoped>
-.add-content{
-  height: 50px;
-  display: flex;
-  align-items: center;
-}
-.footer{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 4rem;
-}
-.craft-tag{
-  display: flex;
-}
-</style>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index bb705ef..cc24be2 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -77,13 +77,8 @@ const editHandle = (data: any) => {
 }
 </script>
 
-<template>
-  <div>
-    <FtTable ref="tableRef" has-header has-page :columns="columns" :btn-list="btnList" :get-data-fn="userList" @add="addHandle" @edit="editHandle" @del="del" />
-    <Edit v-if="addVisible" :data="currentData" @ok="addVisible = false;tableRef?.initData()" @cancel="addVisible = false" />
-  </div>
+<template lang="pug">
+  div
+    FtTable(ref="tableRef", has-header, has-page, :columns="columns", :btn-list="btnList", :get-data-fn="userList", @add="addHandle", @edit="editHandle", @del="del")
+    Edit(v-if="addVisible", :data="currentData", @ok="addVisible = false;tableRef?.initData()", @cancel="addVisible = false")
 </template>
-
-<style scoped lang="scss">
-
-</style>