换模界面改为刀具管理

快乐的昕的电脑

2025-10-08 ffe32b53fdd713391a39ef6cea7d157f21ddc888

换模界面改为刀具管理

 .vs/slnx.sqlite

Binary files differ

 .vs/Ç°¶Ë2/CopilotIndices/17.14.878.3237/CodeChunks.db-shm

Binary files differ

 .vs/Ç°¶Ë2/CopilotIndices/17.14.878.3237/CodeChunks.db-wal

Binary files differ

 .vs/Ç°¶Ë2/CopilotIndices/17.14.878.3237/SemanticSymbols.db-shm

Binary files differ

 .vs/Ç°¶Ë2/CopilotIndices/17.14.878.3237/SemanticSymbols.db-wal

Binary files differ

 .vs/Ç°¶Ë2/copilot-chat/d2d02e8e/sessions/20eb85ea-4482-4e35-8bf7-82a70f564949

Binary files differ

 .vs/Ç°¶Ë2/copilot-chat/d2d02e8e/sessions/21dbb0ca-a73e-49a1-b73f-28408d23e381

Binary files differ

 .vs/Ç°¶Ë2/v17/.wsuo

Binary files differ

 .vs/Ç°¶Ë2/v17/DocumentLayout.backup.json

@@ -30,7 +30,7 @@
      "DocumentGroups": [
        {
          "DockedWidth": 200,
          "SelectedChildIndex": 4,
          "SelectedChildIndex": 5,
          "Children": [
            {
              "$type": "Bookmark",
@@ -45,6 +45,10 @@
              "Name": "ST:128:0:{116d2292-e37d-41cd-a077-ebacac4c8cc4}"
            },
            {
              "$type": "Bookmark",
              "Name": "ST:0:0:{1c4feeaa-4718-4aa9-859d-94ce25d182ba}"
            },
            {
              "$type": "Document",
              "DocumentIndex": 1,
              "Title": "index.js",
@@ -54,7 +58,8 @@
              "RelativeToolTip": "store\\index.js",
              "ViewState": "AgIAAAAAAAAAAAAAAAAAAA4AAAADAAAAAAAAAA==",
              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001646|",
              "WhenOpened": "2025-09-25T08:50:23.315Z"
              "WhenOpened": "2025-09-25T08:50:23.315Z",
              "EditorCaption": ""
            },
            {
              "$type": "Document",
@@ -64,7 +69,7 @@
              "RelativeDocumentMoniker": "pages\\index.vue",
              "ToolTip": "F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\pages\\index.vue",
              "RelativeToolTip": "pages\\index.vue",
              "ViewState": "AgIAACEAAAAAAAAAAAAAALUAAAAMAAAAAAAAAA==",
              "ViewState": "AgIAANIBAAAAAAAAAAAcwP4BAAAAAAAAAAAAAA==",
              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
              "WhenOpened": "2025-09-24T02:18:33.79Z",
              "EditorCaption": ""

 .vs/Ç°¶Ë2/v17/DocumentLayout.json

@@ -3,16 +3,16 @@
  "WorkspaceRootPath": "F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\",
  "Documents": [
    {
      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\components\\WorkOrder.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:components\\WorkOrder.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
    },
    {
      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\pages\\index.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:pages\\index.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
    },
    {
      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\store\\index.js||{14D17961-FE51-464D-9111-C4AF11D7D99A}",
      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:store\\index.js||{14D17961-FE51-464D-9111-C4AF11D7D99A}"
    },
    {
      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\components\\WorkOrder.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:components\\WorkOrder.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}"
    },
    {
      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\components\\WorkOrderPrint.vue||{40D31677-CBC0-4297-A9EF-89D907823A98}",
@@ -30,7 +30,7 @@
      "DocumentGroups": [
        {
          "DockedWidth": 200,
          "SelectedChildIndex": 5,
          "SelectedChildIndex": 6,
          "Children": [
            {
              "$type": "Bookmark",
@@ -50,7 +50,7 @@
            },
            {
              "$type": "Document",
              "DocumentIndex": 1,
              "DocumentIndex": 2,
              "Title": "index.js",
              "DocumentMoniker": "F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\store\\index.js",
              "RelativeDocumentMoniker": "store\\index.js",
@@ -58,33 +58,33 @@
              "RelativeToolTip": "store\\index.js",
              "ViewState": "AgIAAAAAAAAAAAAAAAAAAA4AAAADAAAAAAAAAA==",
              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001646|",
              "WhenOpened": "2025-09-25T08:50:23.315Z",
              "EditorCaption": ""
              "WhenOpened": "2025-09-25T08:50:23.315Z"
            },
            {
              "$type": "Document",
              "DocumentIndex": 0,
              "DocumentIndex": 1,
              "Title": "index.vue",
              "DocumentMoniker": "F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\pages\\index.vue",
              "RelativeDocumentMoniker": "pages\\index.vue",
              "ToolTip": "F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\pages\\index.vue",
              "RelativeToolTip": "pages\\index.vue",
              "ViewState": "AgIAANIBAAAAAAAAAAAcwP4BAAAAAAAAAAAAAA==",
              "ViewState": "AgIAAAkAAAAAAAAAAAAAAB8AAAAAAAAAAAAAAA==",
              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
              "WhenOpened": "2025-09-24T02:18:33.79Z",
              "EditorCaption": ""
            },
            {
              "$type": "Document",
              "DocumentIndex": 2,
              "DocumentIndex": 0,
              "Title": "WorkOrder.vue",
              "DocumentMoniker": "F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\components\\WorkOrder.vue",
              "RelativeDocumentMoniker": "components\\WorkOrder.vue",
              "ToolTip": "F:\\\u516C\u53F8\u9879\u76EE\u8F6F\u4EF6\\GIT\\01\u9F7F\u8F6E\u8BBE\u8BA1\\\u524D\u7AEF2\\components\\WorkOrder.vue",
              "RelativeToolTip": "components\\WorkOrder.vue",
              "ViewState": "AgIAAF4BAAAAAAAAAAAAAG4BAAAJAAAAAAAAAA==",
              "ViewState": "AgIAAM0AAAAAAAAAAAAAAN8AAAA6AAAAAAAAAA==",
              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003491|",
              "WhenOpened": "2025-09-23T08:05:50.481Z"
              "WhenOpened": "2025-09-23T08:05:50.481Z",
              "EditorCaption": ""
            },
            {
              "$type": "Document",

 components/mold.vue

@@ -1,322 +1,286 @@
<template>
    <view class="page">
		
        <view>
            <h4>说明:多工单模式时换模是统一的</h4>
        </view>
        <view class="refresh-btn" @click="handleRefresh">刷新</view>
        <!-- é¡¶éƒ¨è¡¨å•éƒ¨åˆ† -->
        <!-- é¡¶éƒ¨Tab栏（如有需要可保留） -->
        <!-- åˆ€å…·é€‰æ‹©åŒº -->
        <view class="top-section">
            <view class="form-group">
                <label>模具编号：</label>
                <input class="input" v-model="order.moldId" placeholder="工单带出" disabled="true" />
                <label>选择刀具编号：</label>
                <select v-model="selectedToolNo">
                    <option v-for="tool in toolList" :key="tool.no" :value="tool.no">{{ tool.no }} | {{ tool.name }}</option>
                </select>
                <button class="btn-blue" @click="showToolDialog = true">刀具目录</button>
            </view>
            <view class="form-group">
                <label>使用次数：</label>
                <input class="input" v-model="order.moldInseptionQty" placeholder="模具带出" disabled="true" />
                <label>刀具名称：</label>
                <input class="input" v-model="toolName" placeholder="刀具带出" disabled />
            </view>
            <view class="form-group">
                <label>提醒保养次数：</label>
                <input class="input" v-model="order.modlLifeWorning" placeholder="模具带出" disabled="true" />
                <label>规格型号：</label>
                <input class="input" v-model="toolModel" placeholder="刀具带出" disabled />
            </view>
        </view>

        <!-- ä¸­é—´çŠ¶æ€éƒ¨åˆ†ï¼Œä¸Šä¸‹ç»“æž„ -->
        <view class="middle-section">
            <view class="item">
                <button class="btn-disabled">换模开始（=前工单完工）</button>
                <input class="txt-inp" v-model="startTime" placeholder="输入换模开始时间" />
            </view>
            <view class="item">
                <button @click="stateCheck(1)" class="btn-blue">换模完成（点击按钮）</button>
                <input class="txt-inp" v-model="endTime" placeholder="点击换模完成写入" />
        <!-- åˆ€å…·ç›®å½•å¼¹çª— -->
        <view v-if="showToolDialog" class="dialog-overlay">
            <view class="dialog">
                <view class="form-group">
                    <input v-model="searchKey" placeholder="输入刀具编码、名称模糊搜索" class="input" />
                    <button class="btn-blue" @click="searchTool">搜索</button>
                </view>
                <view class="tool-list">
                    <button v-for="tool in filteredTools" :key="tool.no" class="tool-btn" @click="selectTool(tool)">
                        {{ tool.no }} | {{ tool.name }}
                    </button>
                </view>
                <view class="dialog-actions">
                    <button class="btn-blue" @click="confirmTool">确定</button>
                    <button class="btn-disabled" @click="showToolDialog = false">取消</button>
                </view>
            </view>
        </view>

        <!-- åº•éƒ¨ä¿å­˜/取消按钮 -->
        <!-- åˆ€å…·ä½¿ç”¨è®°å½•è¡¨æ ¼ -->
        <view class="table-section">
            <table>
                <thead>
                    <tr>
                        <th>刀具编号</th>
                        <th>刀具名称</th>
                        <th>上刀时间</th>
                        <th>上刀计数</th>
                        <th>下刀时间</th>
                        <th>下刀计数</th>
                        <th>使用次数</th>
                        <th>使用上限</th>
                        <th>寿命比%</th>
                        <th>寿命预警值</th>
                        <th>预警状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in toolRecords" :key="item.id">
                        <td>{{ item.no }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.upTime }}</td>
                        <td>{{ item.upCount }}</td>
                        <td>{{ item.downTime }}</td>
                        <td>{{ item.downCount }}</td>
                        <td>{{ item.useCount }}</td>
                        <td>{{ item.useLimit }}</td>
                        <td>{{ item.lifePercent }}</td>
                        <td>{{ item.lifeWarn }}</td>
                        <td :class="item.warnStatus === '警告' ? 'warn' : ''">{{ item.warnStatus }}</td>
                    </tr>
                </tbody>
            </table>
        </view>

        <!-- ä¸Šä¸‹åˆ€æŒ‰é’® -->
        <view class="bottom-section">
            <button class="save-btn" @click="save">保存并生效</button>
            <button class="save-btn" @click="handleUpTool">上刀提交</button>
            <button class="save-btn" @click="handleDownTool">下刀提交</button>
            <button class="cancel-btn" @click="cancel">取消</button>
        </view>

        <!-- è¯´æ˜Ž -->
        <view class="tool-desc">
            <p style="color:red;">当前工单中，换了几次刀，就会产生几条数据。上刀时间、下刀时间在表中能看到。</p>
            <p style="color:red;">上刀时间和对应时间用生产计数器匹配，查出当时的生产数（累计计数）。</p>
            <p style="color:red;">寿命比预警值在刀具上，默认统一。</p>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            orderNo: String,
            orderId: Number,
            machineNo: String
        },
        data() {
            return {
                startTime: '',
                endTime: '',
                order: {},
                statusForm: {}
            }
        },
        created() {

            // let machine = uni.getStorageSync('machine');
            // let orderId = uni.getStorageSync('orderId');
            // let orderNo = uni.getStorageSync('orderNo');

            // if (orderId) {
            //     this.orderId = orderId;
            // } else {
            //     if (!this.orderId) {
            //         this.orderId = uni.getStorageSync('id');
            //     }

            // }

            // if (orderNo) {
            //     this.orderNo = orderNo;
            // } else {
            //     if (!this.orderNo) {
            //         this.orderNo = uni.getStorageSync('daa001');
            //     }
            // }

            // if (machine) {
            //     this.machineNo = machine;
            // } else {
            //     if (!this.machineNo) {
            //         this.machineNo = uni.getStorageSync('machineNo');
            //     }
            // }

            if (!this.orderId && !this.orderNo) {
                return;
            }

            this.getOrderById();

            this.findByOrderId();
                toolList: [
                    // ç¤ºä¾‹æ•°æ®ï¼Œå®žé™…应从后端接口获取
                    { no: 'T22050338', name: 'm1.5合金长刀', model: 'xxx' },
                    { no: 'T22050337', name: 'm0.546合金长刀', model: 'yyy' }
                ],
                selectedToolNo: '',
                toolName: '',
                toolModel: '',
                showToolDialog: false,
                searchKey: '',
                filteredTools: [],
                toolRecords: [
                    // ç¤ºä¾‹æ•°æ®ï¼Œå®žé™…应从后端接口获取
                    { id: 1, no: 'T22050338', name: 'm1.5合金长刀', upTime: '7-13 9:00', upCount: 15, downTime: '7-13 19:00', downCount: 3115, useCount: 3100, useLimit: 8888, lifePercent: '34.88%', lifeWarn: '90%', warnStatus: '正常' }
                ]
            };
        },
        methods: {

            handleRefresh() {
                this.getOrderById();
                this.findByOrderId();
            searchTool() {
                this.filteredTools = this.toolList.filter(t =>
                    t.no.includes(this.searchKey) || t.name.includes(this.searchKey)
                );
            },

            save() {
                if (!this.statusForm.id) {
                    this.$showMessage("id为空，不允许推送");
                    return;
                }

                this.$post({
                    url: "/MesOrderSta/ChangeMoldTime",
                    data: {
                        changeMoldStartTime: this.startTime,
                        changeMoldEndTime: this.endTime,
                        id: this.statusForm.id,
                        orderId: this.orderId,
                        machineNo: this.machineNo,
                        flag: this.flag
                    }
                }).then(res => {
                    if (res.data.tbBillList) {
                        this.$showMessage("保存成功");
                        this.findByOrderId();
						
                        uni.showToast({
                                icon: 'success',
                                title: '保存成功',
                                duration: 30001,
                            });
							
                    } else {
                        this.$showMessage("保存失败");
                        this.cancel();
                    }
                })
            selectTool(tool) {
                this.selectedToolNo = tool.no;
                this.toolName = tool.name;
                this.toolModel = tool.model;
            },
            confirmTool() {
                this.showToolDialog = false;
            },
            handleUpTool() {
                // ä¸Šåˆ€æäº¤é€»è¾‘，调用后端接口
                this.$showMessage('上刀提交成功（示例）');
            },
            handleDownTool() {
                // ä¸‹åˆ€æäº¤é€»è¾‘，调用后端接口
                this.$showMessage('下刀提交成功（示例）');
            },
            cancel() {
                this.startTime = this.statusForm.changeMoldStartTime;
                this.endTime = this.statusForm.changeMoldEndTime;
            },
            getOrderById() {
                this.$post({
                    url: "/Womdaa/GetWomdaaById",
                    data: {
                        orderId: this.orderId,
                        orderNo: this.orderNo
                    }
                }).then(res => {
                    this.order = res.data.tbBillList;
                })
            },
            findByOrderId() {
                this.$post({
                    url: "/MesOrderSta/FindByOrderNo",
                    data: {
                        orderId: this.orderId,
                        orderNo: this.orderNo
                    }
                }).then(res => {
                    this.statusForm = res.data.tbBillList;
                    this.startTime = res.data.tbBillList.changeMoldStartTime;
                    this.endTime = res.data.tbBillList.changeMoldEndTime;
                })
            },
            stateCheck(item) {
                switch (item) {
                    case 0:
                        this.startTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
                        this.endTime = this.statusForm.changeMoldEndTime;
                        break;
                    case 1:
                        this.startTime = this.statusForm.changeMoldStartTime;
                        this.endTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
                        break;
                }
                this.flag = item;
                this.selectedToolNo = '';
                this.toolName = '';
                this.toolModel = '';
            }
        },
        mounted() {
            // å®žé™…应从后端加载刀具目录和使用记录
            this.filteredTools = this.toolList;
        }
    };
</script>

<style scoped>
    /* é¡µé¢æ’‘满窗体 */
    .page {
        padding: 2vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .refresh-btn {
        position: absolute;
        top: -5px;
        right: 40px;
        background-color: #00A2E9;
        color: white;
        padding: 10px 15px;
        font-size: 35px;
        border-radius: 5px;
        cursor: pointer;
    }

    .refresh-btn:disabled {
        background-color: #ccc;
    }

    /* é¡¶éƒ¨è¡¨å•éƒ¨åˆ† */
    .top-section {
        /* display: flex;
        justify-content: space-between;
        margin-bottom: 2vh; */
        display: flex;
                margin-bottom: 2vh;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: space-between;
                align-items: baseline;
        flex-wrap: wrap;
        margin-bottom: 2vh;
    }

    .form-group {
        display: flex;
        align-items: center;
        margin-right: 2vw;
        margin-bottom: 1.5vh;
    }

    label {
        /* margin-right: 1vw;
        font-size: 1.6vw; */
        /* Larger font size for labels */
        float: left;
                /* margin-right: 1vw; */
                font-size: 1.6vw;
                margin-top: 24px;
    }

    .input {
        padding: 1vh;
        font-size: 1.5vw;
        /* Larger font size for input fields */
        border: 1px solid #ccc;
        width: 20vw;
        /* Set relative width for input fields */
    }

    /* ä¸­é—´çŠ¶æ€éƒ¨åˆ†ï¼Œä¸Šä¸‹å¸ƒå±€ */
    .middle-section {
        display: flex;
        flex-direction: column;
        margin-bottom: 4vh;
    }

    .item {
        display: flex;
        flex-direction: row;
        /* Arrange items vertically */
        align-items: flex-start;
        margin-bottom: 2vh;
    }

    button {
        width: 100%;
        /* Full width for buttons */
        padding: 1.5vh;
        font-size: 1.5vw;
        /* Larger font size for buttons */
        border: none;
        text-align: center;
    }

    .btn-disabled {
        background-color: #ccc;
        color: white;
        width: 16vw;
    }

    .btn-blue {
        background-color: #00A2E9;
        color: white;
        border: none;
        padding: 8px 18px;
        margin-left: 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    input {
        margin-top: 10px;
        padding: 10px;
        font-size: 14px;
    .btn-disabled {
        background-color: #ccc;
        color: white;
        border: none;
        padding: 8px 18px;
        margin-left: 10px;
        border-radius: 5px;
        cursor: not-allowed;
    }

    .dialog-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .dialog {
        background: #fff;
        padding: 2vh 2vw;
        border-radius: 8px;
        width: 60vw;
    }

    .tool-list {
        display: flex;
        flex-wrap: wrap;
        margin: 1vh 0;
    }

    .tool-btn {
        margin: 5px 10px 5px 0;
        padding: 8px 16px;
        background: #f5f5f5;
        border: 1px solid #ccc;
        width: 100%;
        /* è¾“入框撑满宽度 */
        border-radius: 4px;
        cursor: pointer;
    }

    /* åº•éƒ¨ä¿å­˜/取消按钮 */
    .bottom-section {
    .dialog-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 4vh;
        margin-bottom: 4vh;
        margin-top: 2vh;
    }

    .save-btn,
    .cancel-btn {
        width: 48%;
        /* Half-width buttons */
    .table-section {
        margin: 2vh 0;
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #ccc;
        padding: 8px 4px;
        text-align: center;
        font-size: 1vw;
    }

    .warn {
        color: red;
        font-weight: bold;
    }

    .bottom-section {
        display: flex;
        justify-content: space-around;
        margin-top: 2vh;
    }

    .save-btn, .cancel-btn {
        width: 28%;
        padding: 1.5vh;
        background-color: #00A2E9;
        color: white;
        font-size: 1.6vw;
        /* Larger font size for save/cancel buttons */
        font-size: 1.2vw;
        border: none;
        text-align: center;
        border-radius: 5px;
    }

    .txt-inp {
        height: 8vh;
        padding: 1vh;
        font-size: 1.5vw;
        /* Increased font size */
        width: 100%;
        /* Full width for input in middle section */
        box-sizing: border-box;
    .cancel-btn {
        background-color: #ccc;
        color: #333;
    }

    .tool-desc {
        margin-top: 2vh;
    }
</style>

 pages/index.vue

@@ -12,7 +12,7 @@
                è°ƒæœºé€æ£€
            </view>
            <view class="tab-item" :class="{ active: currentTab === 2 }" @click="changeTab(2)">
                æ¢æ¨¡
                åˆ€å…·ç®¡ç†
            </view>
            <view class="tab-item" :class="{ active: currentTab === 1 }" @click="changeTab(1)">
                å¼€å·¥å®Œå·¥