Skip to content

V
vue-next
提交 6716462d authored 作者: 王健's avatar 王健
浏览文件
操作

ddd

上级 c6d17d3d
隐藏空白字符变更
内嵌 并排
正在显示 包含 607 行增加 和 187 行删除
package.json
浏览文件 @ 6716462d
......@@ -8,7 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"fastclick": "^1.0.6",
"qs": "^6.9.4",
"vue": "^3.0.0-beta.1",
"vue-router": "^4.0.0-alpha.6",
"vuex": "^4.0.0-alpha.1"
......
src/App.vue
浏览文件 @ 6716462d
<template>
<div id="app">
<my-header>{{ headerTitle }}</my-header>
<router-view />
</div>
</template>
<style lang="scss"></style>
<script>
import MyHeader from '@/components/Header'
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
name: 'app',
components: {
MyHeader
},
setup() {
const store = useStore(),
state = store.state,
router = useRouter()
router.push('/')
return computed(() => state).value
}
}
</script>
<style lang="scss">
.container {
padding: 0.82rem 0 0.44rem 0;
box-sizing: border-box;
}
</style>
src/assets/css/border.css 0 → 100644
浏览文件 @ 6716462d
@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
content: "\0020";
overflow: hidden;
position: absolute;
}
/* border
* 因，边框是由伪元素区域遮盖在父级
* 故，子级若有交互，需要对子级设置
* 定位 及 z轴
*/
.border::before {
box-sizing: border-box;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
left: 0;
width: 100%;
height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
top: 0;
width: 1px;
height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
border-top: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
border-right: 1px solid #eaeaea;
transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
border-bottom: 1px solid #eaeaea;
transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
border-left: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
/* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
.border::before {
width: 200%;
height: 200%;
transform: scale(.5);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.5);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.5);
}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
.border::before {
width: 300%;
height: 300%;
transform: scale(.33333);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.33333);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.33333);
}
}
\ No newline at end of file
src/assets/css/reset.css 0 → 100644
浏览文件 @ 6716462d
/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
:focus {
outline: 1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
\ No newline at end of file
src/assets/js/common.js 0 → 100644
浏览文件 @ 6716462d
import FastClick from 'fastclick'
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 3.75 + 'px'
window.addEventListener(
'load',
function() {
FastClick.attach(document.body)
},
false
)
document.documentElement.addEventListener(
'touchmove',
function(e) {
if (e.touches.length > 1) {
e.preventDefault()
}
},
false
)
src/components/Header/index.vue 0 → 100644
浏览文件 @ 6716462d
<template>
<div class="header">
<h1>
<slot></slot>
</h1>
</div>
</template>
<script>
export default {
name: 'MyHeader'
}
</script>
<style lang="scss" scoped>
.header {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 0.44rem;
background-color: #ed4040;
text-align: center;
line-height: 0.44rem;
h1 {
font-size: 0.18rem;
color: #fff;
}
}
</style>
src/components/Tab/NavBar/NavItem.vue deleted 100644 → 0
浏览文件 @ c6d17d3d
<template>
<div
:class="['nav_item', { nav_current: index === curIdx }]"
@click="changeCityInfo"
>
{{ item }}
</div>
</template>
<script>
import { getCurrentInstance, computed } from 'vue'
export default {
name: 'NavItem',
props: {
item: String,
index: Number
},
setup(props) {
const { ctx } = getCurrentInstance(),
store = ctx.$store
const changeCityInfo = () => {
store.commit('changeCityInfo', props.index)
}
return {
curIdx: computed(() => store.state.curIdx),
changeCityInfo
}
}
}
</script>
<style lang="scss" scoped>
.nav_item {
position: relative;
float: left;
width: 25%;
height: 50px;
line-height: 50px;
text-align: center;
overflow: hidden;
&::before {
position: absolute;
top: -50px;
left: 0;
content: '';
height: 50px;
width: 100%;
background-color: antiquewhite;
z-index: -1;
transition: all 0.3s ease-in-out;
}
&:hover::before {
transform: translateY(50px);
}
&.nav_current {
color: white;
background-color: black;
}
}
</style>
src/components/Tab/NavBar/index.vue deleted 100644 → 0
浏览文件 @ c6d17d3d
<template>
<div class="nav_bar">
<nav-item
v-for="(item, index) in navData"
:key="index"
:item="item"
:index="index"
></nav-item>
</div>
</template>
<script>
import NavItem from './NavItem'
export default {
name: 'NavBar',
components: {
NavItem
},
props: {
navData: Array
}
}
</script>
<style lang="scss" scoped>
.nav_bar {
height: 50px;
border-bottom: 1px solid #000;
}
</style>
src/components/Tab/Page/index.vue deleted 100644 → 0
浏览文件 @ c6d17d3d
<template>
<div class="page">
<h1>{{ cityInfo.name }}</h1>
<img :src="cityInfo.img" :alt="cityInfo.name" />
<p>{{ cityInfo.desc }}</p>
</div>
</template>
<script>
import { getCurrentInstance, computed } from 'vue'
export default {
name: 'Page',
props: {
cityData: Array
},
setup(props) {
const { ctx } = getCurrentInstance(),
state = ctx.$store.state
return {
cityInfo: computed(() => props.cityData[state.curIdx])
}
}
}
</script>
<style lang="scss" scoped>
.page {
height: 450px;
width: 100%;
padding: 20px;
box-sizing: border-box;
overflow: auto;
img {
width: 100%;
}
}
</style>
src/components/Tab/index.vue deleted 100644 → 0
浏览文件 @ c6d17d3d
<template>
<div class="tab">
<nav-bar :navData="navData"></nav-bar>
<page :cityData="cityData"></page>
</div>
</template>
<script>
import NavBar from './NavBar'
import Page from './Page'
import navData from '@/data/nav'
import cityData from '@/data/city'
export default {
name: 'tab',
components: {
NavBar,
Page
},
setup() {
return {
navData,
cityData
}
}
}
</script>
<style lang="scss" scoped>
.tab {
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid #000;
}
</style>
src/config/keys.js 0 → 100644
浏览文件 @ 6716462d
const AppKey = 'd844e9692d9c89d8b73c2142ee514ae8'
export { AppKey }
src/libs/http.js 0 → 100644
浏览文件 @ 6716462d
import axios from 'axios'
import qs from 'qs'
import { AppKey } from '@/config/keys'
function axiosPost(options) {
axios({
url: options.url,
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: qs.stringify({
...options.data,
key: AppKey
})
})
.then(res => {
options.success(res.data)
})
.catch(error => {
options.error(error)
})
}
function axiosGet(options) {
axios(options.url + '&key=' + AppKey)
.then(res => {
options.success(res.data)
})
.catch(error => {
options.error(error)
})
}
export { axiosPost, axiosGet }
src/main.js
浏览文件 @ 6716462d
......@@ -3,6 +3,10 @@ import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/reset.css'
import '@/assets/css/border.css'
import '@/assets/js/common.js'
createApp(App)
.use(router)
.use(store)
......
src/router/index.js
浏览文件 @ 6716462d
......@@ -4,8 +4,18 @@ import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
name: 'home',
component: Home
},
{
path: '/month',
name: 'month',
component: () => import('../views/Month.vue')
},
{
path: '/year',
name: 'year',
component: () => import('../views/Year.vue')
}
]
......
src/service/index.js 0 → 100644
浏览文件 @ 6716462d
import { getDayData, getMonthData, getYearData } from './request'
export default async (filed, date) => {
let data = null
switch (filed) {
case 'day':
data = await getDayData(date)
break
case 'month':
data = await getMonthData(date)
break
case 'year':
data = await getYearData(date)
break
default:
break
}
return data
}
src/service/request.js 0 → 100644
浏览文件 @ 6716462d
import { axiosPost } from '@/libs/http'
function getDayData(date) {
return new Promise((resolve, reject) => {
axiosPost({
url: '/api/calendar/day',
data: {
date
},
success(res) {
resolve(res)
},
error(error) {
reject(error)
}
})
})
}
function getMonthData(yearMonth) {
return new Promise((resolve, reject) => {
axiosPost({
url: '/api/calendar/month',
data: {
'year-month': yearMonth
},
success(res) {
resolve(res)
},
error(error) {
reject(error)
}
})
})
}
function getYearData(year) {
return new Promise((resolve, reject) => {
axiosPost({
url: '/api/calendar/year',
data: {
year
},
success(res) {
resolve(res)
},
error(error) {
reject(error)
}
})
})
}
export { getDayData, getMonthData, getYearData }
src/store/index.js
浏览文件 @ 6716462d
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
export default Vuex.createStore({
state: {
curIdx: 0
},
mutations: {
changeCityInfo(state, index) {
state.curIdx = index
}
},
state,
mutations,
actions: {},
modules: {}
})
src/store/mutations.js 0 → 100644
浏览文件 @ 6716462d
export default {
setHeaderTitle(state, routerName) {
switch (routerName) {
case 'home':
state.headerTitle = '当天信息'
break
case 'month':
state.headerTitle = '近期假期'
break
case 'year':
state.headerTitle = '当年假期'
break
default:
state.headerTitle = '当天信息'
}
}
}
src/store/state.js 0 → 100644
浏览文件 @ 6716462d
export default {
headerTitle: '当天信息'
}
src/views/Home.vue
浏览文件 @ 6716462d
<template>
<div class="home">
<Tab></Tab>
</div>
<div class="container"></div>
</template>
<script>
import Tab from '@/components/Tab'
import getData from '@/service'
import { onMounted } from 'vue'
export default {
components: {
Tab
},
name: 'Home'
name: 'Home',
components: {},
setup() {
onMounted(() => {
getData('day', '2020-7-1')
})
return {}
}
}
</script>
<style lang="scss" scoped>
.container {
}
</style>
src/views/Month.vue 0 → 100644
浏览文件 @ 6716462d
<template>
<div></div>
</template>
<script>
export default {
name: 'Month'
}
</script>
<style lang="scss" scoped></style>
src/views/Year.vue 0 → 100644
浏览文件 @ 6716462d
<template>
<div></div>
</template>
<script>
export default {
name: 'Year'
}
</script>
<style lang="scss" scoped></style>
vue.config.js 0 → 100644
浏览文件 @ 6716462d
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://v.juhe.cn/',
changeOrigin: true,
ws: true,
secure: false,
pathRewrite: {
'^/api': ''
}
}
}
}
}
yarn.lock
浏览文件 @ 6716462d
......@@ -1765,6 +1765,13 @@ aws4@^1.8.0:
resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2"
integrity sha1-oXs6jqgRBg501H0wYSJACtRJeuI=
axios@^0.19.2:
version "0.19.2"
resolved "https://registry.npm.taobao.org/axios/download/axios-0.19.2.tgz?cache=0&sync_timestamp=1594827610645&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
integrity sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=
dependencies:
follow-redirects "1.5.10"
babel-eslint@^10.1.0:
version "10.1.0"
resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
......@@ -2961,6 +2968,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
dependencies:
ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=
dependencies:
ms "2.0.0"
debug@^3.1.1, debug@^3.2.5:
version "3.2.6"
resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
......@@ -3758,6 +3772,11 @@ fast-levenshtein@~2.0.6:
resolved "https://registry.npm.taobao.org/fast-levenshtein/download/fast-levenshtein-2.0.6.tgz?cache=0&sync_timestamp=1595428000133&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-levenshtein%2Fdownload%2Ffast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
fastclick@^1.0.6:
version "1.0.6"
resolved "https://registry.npm.taobao.org/fastclick/download/fastclick-1.0.6.tgz#161625b27b1a5806405936bda9a2c1926d06be6a"
integrity sha1-FhYlsnsaWAZAWTa9qaLBkm0Gvmo=
faye-websocket@^0.10.0:
version "0.10.0"
resolved "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
......@@ -3911,6 +3930,13 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&sync_timestamp=1592518278637&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=
dependencies:
debug "=3.1.0"
follow-redirects@^1.0.0:
version "1.12.1"
resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.12.1.tgz?cache=0&sync_timestamp=1592518278637&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"
......@@ -6886,6 +6912,11 @@ qs@6.7.0:
resolved "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
integrity sha1-QdwaAV49WB8WIXdr4xr7KHapsbw=
qs@^6.9.4:
version "6.9.4"
resolved "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
integrity sha1-kJCykNH5FyjTwi5UhDykSupatoc=
qs@~6.5.2:
version "6.5.2"
resolved "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论