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>
|
||||
<main>
|
||||
Web前端实践演示案例
|
||||
</main>
|
||||
</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