重新整理

master
LeeNux 2 years ago
parent f2f51118e6
commit 1137c98519

105
package-lock.json generated

@ -14,6 +14,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.3",
"vconsole": "^3.15.0",
"vite": "^3.0.9"
}
},
@ -28,6 +29,18 @@
"node": ">=6.0.0"
}
},
"node_modules/@babel/runtime": {
"version": "7.20.13",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
"integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
"dev": true,
"dependencies": {
"regenerator-runtime": "^0.13.11"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@esbuild/android-arm": {
"version": "0.15.18",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
@ -180,6 +193,29 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
},
"node_modules/copy-text-to-clipboard": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz",
"integrity": "sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==",
"dev": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/core-js": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
"integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw==",
"dev": true,
"hasInstallScript": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/core-js"
}
},
"node_modules/csstype": {
"version": "2.6.21",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
@ -599,6 +635,12 @@
"sourcemap-codec": "^1.4.8"
}
},
"node_modules/mutation-observer": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
"integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==",
"dev": true
},
"node_modules/nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@ -694,6 +736,12 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"dev": true
},
"node_modules/resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@ -760,6 +808,18 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/vconsole": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.0.tgz",
"integrity": "sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.17.2",
"copy-text-to-clipboard": "^3.0.1",
"core-js": "^3.11.0",
"mutation-observer": "^1.0.3"
}
},
"node_modules/vite": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",
@ -842,6 +902,15 @@
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
"integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg=="
},
"@babel/runtime": {
"version": "7.20.13",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
"integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.11"
}
},
"@esbuild/android-arm": {
"version": "0.15.18",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
@ -967,6 +1036,18 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
},
"copy-text-to-clipboard": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz",
"integrity": "sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==",
"dev": true
},
"core-js": {
"version": "3.28.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
"integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw==",
"dev": true
},
"csstype": {
"version": "2.6.21",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
@ -1186,6 +1267,12 @@
"sourcemap-codec": "^1.4.8"
}
},
"mutation-observer": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
"integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==",
"dev": true
},
"nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@ -1229,6 +1316,12 @@
"source-map-js": "^1.0.2"
}
},
"regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"dev": true
},
"resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@ -1270,6 +1363,18 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true
},
"vconsole": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.0.tgz",
"integrity": "sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.17.2",
"copy-text-to-clipboard": "^3.0.1",
"core-js": "^3.11.0",
"mutation-observer": "^1.0.3"
}
},
"vite": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",

@ -13,6 +13,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.3",
"vconsole": "^3.15.0",
"vite": "^3.0.9"
}
}

@ -3,9 +3,36 @@ import {RouterLink, RouterView} from 'vue-router'
</script>
<template>
<RouterView/>
<div class="menu">
<ol>
<li>
<router-link to="/">首页</router-link>
</li>
<li>
<router-link to="/calc">计算器</router-link>
</li>
</ol>
</div>
<div class="emulator">
<RouterView/>
</div>
</template>
<style scoped>
.menu {
float: left;
}
.emulator {
position: fixed;
right: 50px;
top: 50px;
width: 390px;
height: 844px;
padding: 10px;
border: darkgray solid 1px;
border-radius: 5px;
overflow-y: scroll;
}
</style>

@ -1,7 +1,24 @@
@import "./base.css";
#app {
max-width: 1280px;
margin: 0 auto;
padding: 50px;
font-weight: normal;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 5px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(0, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 3px RGB(243, 243, 244);
}

@ -1,11 +1,15 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import {createApp} from 'vue'
import {createPinia} from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
import VConsole from 'vconsole';
const vConsole = new VConsole();
const app = createApp(App)
app.use(createPinia())

@ -3,54 +3,81 @@
<div class="view">
<input type="text" v-model="text"/>
</div>
<p style="width:100vw">{{text}}</p>
<div class="btn" @click="typ('+')">+</div>
<div class="btn" @click="typ('-')">-</div>
<div class="btn" @click="typ('x')">×</div>
<div class="btn" @click="typ('÷')">÷</div>
<div class="btn" @click="typ('7')">7</div>
<div class="btn" @click="typ('8')">8</div>
<div class="btn" @click="typ('9')">9</div>
<div class="btn"></div>
<div class="btn" @click="typ('4')">4</div>
<div class="btn" @click="typ('5')">5</div>
<div class="btn" @click="typ('6')">6</div>
<div class="btn" @click="typ('+')"><span>+</span></div>
<div class="btn" @click="typ('-')"><span>-</span></div>
<div class="btn" @click="typ('x')"><span>×</span></div>
<div class="btn" @click="typ('÷')"><span>÷</span></div>
<div class="btn" @click="typ('7')"><span>7</span></div>
<div class="btn" @click="typ('8')"><span>8</span></div>
<div class="btn" @click="typ('9')"><span>9</span></div>
<div class="btn"></div>
<div class="btn" @click="typ('1')">1</div>
<div class="btn" @click="typ('2')">2</div>
<div class="btn" @click="typ('3')">3</div>
<div class="btn" @click="typ('4')"><span>4</span></div>
<div class="btn" @click="typ('5')"><span>5</span></div>
<div class="btn" @click="typ('6')"><span>6</span></div>
<div class="btn"></div>
<div class="btn" @click="typ('0')">0</div>
<div class="btn" @click="typ('1')"><span>1</span></div>
<div class="btn" @click="typ('2')"><span>2</span></div>
<div class="btn" @click="typ('3')"><span>3</span></div>
<div class="btn" @click="clear"><span>Clear</span></div>
<div class="btn" @click="typ('0')"><span>0</span></div>
<div class="btn"></div>
<div class="btn" @click="typ('.')">.</div>
<div class="btn" @click="typ('=')">=</div>
<div class="btn" @click="typ('.')"><span>.</span></div>
<div class="btn" @click="typ('=')"><span>=</span></div>
</div>
</template>
<script setup name="calc">
import {ref} from "vue"
const text = ref("")
const active = ref(false)
const res = ref(0)
const typ = (t) => {
text.value = text.value + t
switch t:
case "1":
res.value = 1
active.value = !active.value
import {ref} from "vue"
const text = ref("") //
const result = ref("") //
const restart = ref(false) //
const typ = (t) => {
if (restart.value) clear() //
text.value = text.value + t
switch (t) {
case "x":
result.value += '*'
break
case "÷":
result.value += '/'
break
case "=":
result.value = eval(result.value)
text.value = result.value
restart.value = true //
break
default:
result.value = result.value + t
}
}
//
const clear = function () {
result.value = ""
text.value = ""
restart.value = false //
}
</script>
<style scoped>
.calc {
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
.view {
width: 100vw;
height: 30vw;
width: 100%;
height: 100px;
}
.view input {
@ -59,17 +86,29 @@
}
.btn {
width: 25vw;
height: 25vw;
position: relative;
width: 25%;
height: 0;
padding-top: 25%;
border: 1px solid #2c3e50;
box-sizing: border-box;
line-height: 25vw;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.active{
border:5px solid #ff0;
.btn > * {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.active {
border: 5px solid #ff0;
}
</style>

@ -4,6 +4,6 @@ import TheWelcome from '../components/TheWelcome.vue'
<template>
<main>
<TheWelcome />
Web前端实践演示案例
</main>
</template>

Loading…
Cancel
Save