forked from mevulfmp3/web
LeeNux
2 years ago
parent
42ed0c610d
commit
bdb853689c
@ -1,86 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="item">
|
|
||||||
<i>
|
|
||||||
<slot name="icon"></slot>
|
|
||||||
</i>
|
|
||||||
<div class="details">
|
|
||||||
<h3>
|
|
||||||
<slot name="heading"></slot>
|
|
||||||
</h3>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.item {
|
|
||||||
margin-top: 2rem;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
place-content: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
color: var(--color-heading);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.item {
|
|
||||||
margin-top: 0;
|
|
||||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
top: calc(50% - 25px);
|
|
||||||
left: -26px;
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
background: var(--color-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:before {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:after {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:first-of-type:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:last-of-type:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default">
|
||||||
|
<div class="menu">
|
||||||
|
<ol>
|
||||||
|
<li v-for="item in menu">
|
||||||
|
<router-link :to="item.path">{{ item.title }}</router-link>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="emulator">
|
||||||
|
<RouterView/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import menu from '../router/menu.js'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.default {
|
||||||
|
padding: 50px;
|
||||||
|
font-weight: normal;
|
||||||
|
background-color: #dffdfd;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emulator {
|
||||||
|
position: fixed;
|
||||||
|
right: 50px;
|
||||||
|
top: 50px;
|
||||||
|
width: 390px;
|
||||||
|
height: 844px;
|
||||||
|
border: darkgray solid 1px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<router-view/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export default [
|
||||||
|
{title: "首页", path: '/'},
|
||||||
|
{title: "计算器", path: '/calc'},
|
||||||
|
{title: "购物车", path: '/webview/cart'},
|
||||||
|
]
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
|
||||||
|
<checkbox v-model="checked">全选</checkbox>
|
||||||
|
<template #tip>
|
||||||
|
你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
|
||||||
|
</template>
|
||||||
|
</submit-bar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref} from 'vue'
|
||||||
|
import {showToast, SubmitBar, Checkbox, CheckboxGroup} from 'vant';
|
||||||
|
|
||||||
|
const checked = ref(false)
|
||||||
|
const onSubmit = () => showToast('点击按钮');
|
||||||
|
const onClickLink = () => showToast('修改地址');
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,9 +1,8 @@
|
|||||||
<script setup>
|
|
||||||
import TheWelcome from '../components/TheWelcome.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main>
|
||||||
Web前端实践演示案例
|
Web前端实践演示案例
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|||||||
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<iframe :src="path"></iframe>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {onMounted, ref} from 'vue'
|
||||||
|
import {useRouter, useRoute} from 'vue-router'
|
||||||
|
|
||||||
|
const path = ref("#/pure/")
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const query = route.params.page
|
||||||
|
path.value += query
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue