#untitled.als
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>all</title>
<script src="vue.global.js"></script>
<script src="vue-router.global.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.nav-links {
background-color: #007bff;
color: #fff;
padding: 10px 0;
margin-bottom: 20px;
border-radius: 4px;
}
.nav-links div {
margin: 0 10px;
display: inline-block;
}
.nav-links a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
}
.nav-links a:hover {
color: #000000;
}
.content {
margin-top: 20px;
}
.form-container {
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
text-align: center;
}
.h {
cursor: pointer;
margin: 10px 20px;
display: inline-block;
}
.row {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 10px;
}
label {
margin-right: 10px;
}
input {
padding: 5px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
width: 40px;
margin: 10px;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
color: #000000;
}
table {
margin: 0 auto;
border: 1px solid #000000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000000;
text-align: center;
}
/* 以下为tab栏的样式 */
.tab h1 {
text-align: center;
margin-bottom: 20px;
color: grey;
}
.a1 {
text-decoration: none;
color: gray;
}
.btn2:hover a,
.btn1:hover a,
.btn3:hover a {
color: black;
}
.btn1,
.btn2,
.btn3 {
width: 90px;
height: 30px;
line-height: 30px;
display: inline-block;
border-radius: 8px;
}
.reg,
.receive,
.login {
text-align: center;
width: 300px;
height: 200px;
border-radius: 20px;
background-color: rgba(194, 226, 230, 0.3);
box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
10px 10px 15px rgba(70, 70, 80, 0.15);
margin: 0 auto;
color: #fff;
}
.reg {
background-color: rgba(255, 221, 223, 0.3);
}
.receive {
background-color: rgba(206, 236, 206, 0.4);
}
.login h2,
.reg h2,
.receive h2 {
line-height: 160px;
}
/* 以下是 */
.loginmin button {
margin-left: 70px;
margin-right: 20px;
}
.btnlink {
text-decoration: none;
color: white;
font-weight: bolder;
color: #ccc;
}
.btn4:hover a,
.btn5:hover a {
color: black;
}
.btn5,
.btn4 {
width: 60px;
height: 30px;
line-height: 30px;
display: inline-block;
}
.loginmin {
text-align: center;
width: 300px;
height: 200px;
background-color: white;
margin: 0 auto;
border-radius: 15px;
box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
10px 10px 15px rgba(70, 70, 80, 0.12);
text-align: center;
}
.registration {
text-align: center;
width: 300px;
height: 200px;
background-color: white;
margin: 0 auto;
border-radius: 15px;
box-shadow: lightblue 10px 10px 10px;
box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
10px 10px 15px rgba(100, 200, 200, 0.12);
text-align: center;
}
.forget {
text-decoration: solid;
}
.loginmin form input,
.registration form input {
margin-top: 15px;
}
.loginmin form .submit,
.registration form .submit {
margin-top: 15px;
width: 50px;
height: 25px;
}
.loginmin h2,
.registration h2 {
padding-top: 10px;
font-weight: 400;
color: rgba(68, 82, 83, 1.0);
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="row justify-content-around nav-links">
<div>
<router-link to="/loginmax" class="block">登录</router-link>
</div>
<div>
<router-link to="/jsq" class="block">计算器</router-link>
</div>
<div>
<router-link to="/tabchange" class="block">tab栏</router-link>
</div>
<div>
<router-link to="/fruit" class="block">水果列表</routers-link>
</div>
<div>
<router-link to="/addrouter" class="block">嵌套路由</router-link>
</div>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
<template id="loginmax">
<div class="form-container">
<div class="row justify-content-around bg-red">
<h3 class="h">登录注册功能</h3>
</div>
<div class="btn5">
<router-link to="/loginmax/loginmin" class="btnlink">登录</router-link>
</div>
<div class="btn4">
<router-link to="/loginmax/registration" class="btnlink">注册</router-link>
</div>
<router-view></router-view>
</template>
<template id="loginmin">
<div class="loginmin">
<h2>login</h2>
<form action="">
账号：<input type="text" placeholder="请输入账号名" /><br>
密码：<input type="password" placeholder="请输入密码" /><br>
<button type="submit" class="submit">
<router-link to="/loginmax/loginmin/success">login</router-link>
</button>
<router-view></router-view>
<a href="#">忘记密码</a>
</form>
</div>
</template>
<template id="registration">
<div class="registration">
<h2>registration</h2>
<form action="">
手机号：<input type="text" placeholder="请输入手机号码" /><br>
验证码：<input type="password" placeholder="请输入验证码" /><br>
<button type="submit" class="submit">提交</button>
<a href="#">未收到验证码</a>
</form>
</div>
</template>
<template id="success">
<h1>登录成功</h1>
</template>
<template id="jsq" class="jsq">
<div class="form-container" class="jsq">
<div class="row justify-content-around bg-red">
<h3 class="h">简易计算器</h3>
</div>
<p>运算数a：<input type="text" v-model="text1"></p>
<p>运算数b：<input type="text" v-model="text2"></p>
<button @click="add()">加</button>
<button @click="dec()">减</button>
<button @click="plu()">乘</button>
<button @click="per()">除</button>
<p>计算结果：{{text}}</p>
</div>
</template>
<template id="fruit">
<div class="form-container">
<div class="row justify-content-around bg-red">
<h3 class="h">水果列表</h3>
</div>
<table align="center" width="400">
<tr>
<th>编号</th>
<th>名称</th>
<th>作用</th>
</tr>
<tr v-for="p in arr" :key="p.name">
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.msg}}</td>
</tr>
</table>
</div>
</div>
</template>
<template id="tabchange">
<div class="form-container">
<div class="row justify-content-around bg-red">
<h3 class="h">tab栏切换</h3>
</div>
<div class="btn1">
<router-link to="/login" class="a1">代付款</router-link>
</div>
<div class="btn2">
<router-link to="/reg" class="a1">待发货</router-link>
</div>
<div class="btn3">
<router-link to="/receive" class="a1">待收货</router-link>
</div>
<router-view></router-view>
</div>
</template>
<template id="login">
<div class="login">
<h2>待付款商品信息</h2>
</div>
</template>
<template id="reg">
<div class="reg">
<h2>待发货商品信息</h2>
</div>
</template>
<template id="receive">
<div class="receive">
<h2>待收货商品信息</h2>
</div>
</template>
<template id="addrouter">
<div class="form-container">
<div class="row justify-content-around bg-red">
<h3 class="h">关于公司嵌套路由功能</h3>
</div>
<div class="router">
<router-link to="/about" class="box">关于公司</router-link>
<br>
<router-link to="/contact" class="box">联系我们</router-link>
<router-view></router-view>
</div>
</div>
</template>
<template id="about">
<div class="main">
<h1>北京xx科技有限公司简介</h1>
</div>
</template>
<template id="contact">
<div class="main">
<h1>联系我们</h1>
<router-link to="/contact/email">发送邮件</router-link>
<router-link to="/contact/more">其他方式</router-link>
<router-view></router-view>
</div>
</template>
<template id="email">
<h1>发送邮件组件</h1>
</template>
<template id="more">
<h1>更多</h1>
</template>
<script>
const loginmin = {
template: "#loginmin"
}
const registration = {
template: "#registration"
}
const success = {
template: "#success"
}
const loginmax = {
template: '#loginmax'
}
const jsq = {
template: '#jsq',
data() {
return {
text1: "",
text2: "",
text: ""
}
},
methods: {
add() {
//加法运算
if (isNaN(this.text1) || isNaN(this.text2)) {
alert("输入错误，请重新输入")
this.text1 = ""
this.text2 = ""
} else {
this.text = +(this.text1) +
+(this.text2)
}
},
//减法
dec() {
if (isNaN(this.text1) || isNaN(this.text2)) {
alert("输入错误，请重新输入")
this.text1 = ""
this.text2 = ""
} else {
this.text = this.text1 -
this.text2
}
},
//乘法
plu() {
if (isNaN(this.text1) || isNaN(this.text2)) {
alert("输入错误，请重新输入")
this.text1 = ""
this.text2 = ""
} else {
this.text = this.text1 *
this.text2
}
},
//除法
per() {
if (isNaN(this.text1) || isNaN(this.text2) || this.text2 == 0) {
alert("输入错误，请重新输入")
this.text1 = ""
this.text2 = ""
} else {
this.text = this.text1 /
this.text2
}
}
}
}
const fruit = {
template: '#fruit',
data() {
return {
arr: [{
id: 1,
name: '苹果',
msg: '苹果汁水丰富，可以生津止渴。'
},
{
id: 2,
name: '柠檬',
msg: '柠檬具有生津止咳、化痰止咳的功效。'
}
]
}
}
}
const tabchange = {
template: '#tabchange',
data() {
return {}
}
}
const login = {
template: "#login"
}
const reg = {
template: "#reg"
}
const receive = {
template: "#receive"
}
const addrouter = {
template: '#addrouter',
data() {
return {
list: [{
id: 1,
name: '苹果',
x: '止咳'
},
{
id: 2,
name: '草莓',
x: '甜'
}
]
}
}
}
const about = {
template: "#about"
}
const contact = {
template: "#contact"
}
const email = {
template: "#email"
}
const more = {
template: "#more"
}
const App = Vue.createApp({})
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [{
path: '/',
redirect: '/loginmax'
},
{
path: '/loginmax',
component: loginmax,
children: [{
path: "/loginmax/loginmin",
component: loginmin,
children: [{
path: "/loginmax/loginmin/success",
component: success
}]
},
{
path: "/loginmax/registration",
component: registration
}
]
},
{
path: '/jsq',
component: jsq
},
{
path: '/fruit',
component: fruit
},
{
path: '/tabchange',
component: tabchange,
children: [{
path: "/login",
component: login,
},
{
path: "/reg",
component: reg
},
{
path: "/receive",
component: receive
}
]
},
{
path: '/addrouter',
component: addrouter,
children: [
// 重定向
{
path: "/",
redirect: "/about"
},
{
path: "/about",
component: about
},
{
path: "/contact",
component: contact,
children: [{
path: "more",
component: more
}, {
path: "email",
component: email
}]
}
]
}
]
});
App.use(router);
App.mount('#app');
</script>
</body>
</html>
2514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
