first commit

master
Joe 2 years ago
commit 9d4223e8ff

24
.gitignore vendored

@ -0,0 +1,24 @@
.DS_Store
node_modules
/dist
package-lock.json
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

@ -0,0 +1,24 @@
# shop-tour-front
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

@ -0,0 +1,12 @@
module.exports = {
// vuecli3 不需要配置transform-vue-jsx
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry',
polyfills: ['es6.promise', 'es6.symbol']
}
]
]
}

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

@ -0,0 +1,50 @@
{
"name": "shop-tour-front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"amfe-flexible": "^2.2.1",
"axios": "^1.1.2",
"core-js": "^3.8.3",
"es6-promise": "^4.2.8",
"vue": "^2.6.14",
"vue-router": "^3.5.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-plugin-import": "^1.13.5",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"postcss-pxtorem": "^6.0.0",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

@ -0,0 +1,10 @@
module.exports = {
plugins: {
autoprefixer: {},
// flexible配置
"postcss-pxtorem": {
"rootValue": 75, // 设计稿宽度的1/10
"propList": ["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>学习</title>
</head>
<body>
<noscript>
<strong>We're sorry but Demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

@ -0,0 +1,81 @@
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}
/* 改变a链接的默认样式,颜色和下划线 */
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "5B8B4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

@ -0,0 +1,14 @@
import '@babel/polyfill'
import Vue from 'vue'
import router from './router'
import App from './App.vue'
import 'amfe-flexible'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
// 注册仓库:
render: h => h(App),
}).$mount('#app')

@ -0,0 +1,40 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import List from '@/views/List'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'MyHome',
component: Home,
meta: {
title: '书架',
requireAuth: false,
}
},
{
path: '/list',
name: 'MyList',
component: List,
meta: {
title: '视频专栏',
requireAuth: false,
}
},
];
const router = new Router({
routes
});
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next();
})
export default router;

@ -0,0 +1,166 @@
<template>
<div class="home">
<div class="image">
<div class="top1">
<img src="../assets/1-1.png" alt="">
<img src="../assets/1-2.png" alt="">
</div>
<div class="top">
<div>
<img src="../assets/2-1.png" alt="">
<img src="../assets/2-2.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=3282491441238021488&reader=d&item_id=3282491441238021488')" alt="">
<img src="../assets/2-3.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=14701597504357426292&reader=d&item_id=14701597504357426292')" alt="">
<img src="../assets/2-4.png" @click="goframe('https://preview-pdf.xuexi.cn/preview/index.html?url=https%3A%2F%2Fpreview-pdf.xuexi.cn%2F5c26096099b6672f682e791a%2F92go8fxk2p6.pdf&copy=1')" alt="">
<img src="../assets/2-5.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=5390930170536430745')" alt="">
<img src="../assets/2-6.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=3866151211527537656&reader=d&item_id=3866151211527537656')" alt="">
</div>
<img src="../assets/2-7.png" @click="goList" alt="">
</div>
<div class="middle">
<div>
<img src="../assets/3-1.png" alt="">
</div>
<div>
<img src="../assets/3-3.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=8764128303112444578&reader=d&item_id=87641283031124445')" alt="">
<img src="../assets/3-4.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=18123163039550890909&reader=d&item_id=18123163039550890909&reedit_timestamp=1633772691000&to_audit_timestamp=2021-10-09%2017%3A44%3A51')" alt="">
<img src="../assets/3-5.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=17684914774430949354&reader=d&item_id=17684914774430949354')" alt="">
<img src="../assets/3-6.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=599354947982776396&reader=d&item_id=599354947982776396')" alt="">
<img src="../assets/3-7.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=13567330445995227532')" alt="">
<img src="../assets/3-8.png" alt="">
<img src="../assets/3-9.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=10075120560555604439')" alt="">
</div>
<img src="../assets/3-10.png" alt="">
</div>
<div class="bottom">
<div>
<img src="../assets/4-1.png" alt="">
<img src="../assets/4-2.png" alt="">
<img src="../assets/4-3.png" @click="goframe('https://preview-pdf.xuexi.cn/preview/index.html?url=https%3A%2F%2Fpreview-pdf.xuexi.cn%2F5b6c4ecb2675211607e7c595%2Fj0xorsjpz1c.pdf&copy=1')" alt="">
<img src="../assets/4-4.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=6251577416777693248&reader=d&item_id=6251577416777693248')" alt="">
<img src="../assets/4-5.png" @click="goframe('https://preview-pdf.xuexi.cn/preview/index.html?url=https%3A%2F%2Fpreview-pdf.xuexi.cn%2F5b6c4eca2675211607e7c58d%2Fa3r4a807jmf.pdf&copy=1')" alt="">
<img src="../assets/4-6.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=15849284870409366834')" alt="">
<img src="../assets/4-7.png" @click="goframe('https://preview-pdf.xuexi.cn/preview/index.html?url=https%3A%2F%2Fpreview-pdf.xuexi.cn%2F5c25da72816b77314386ebc2%2F5gknix0fr2x.pdf&copy=1')" alt="">
<img src="../assets/4-8.png" @click="goframe('https://preview-pdf.xuexi.cn/preview/index.html?url=https%3A%2F%2Fpreview-pdf.xuexi.cn%2F5cee2bab1ff1ad0c482765df%2F993zuyy392j.pdf&copy=1')" alt="">
<img src="../assets/4-9.png" @click="goframe('https://preview-pdf.xuexi.cn/preview/index.html?url=https%3A%2F%2Fpreview-pdf.xuexi.cn%2F5b6e84d6d3318a5436f6f99a%2Fkt9cs157ulp.pdf&copy=1')" alt="">
<img src="../assets/4-10.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=284974874358733901')" alt="">
<img src="../assets/4-11.png" alt="">
<img src="../assets/4-12.png" alt="">
<!-- <img src="../assets/3-10.png" @click="goframe('https://article.xuexi.cn/articles/pdf/index.html?art_id=3552400239348758206')" alt=""> -->
</div>
</div>
<img style="width: 100%;" src="../assets/0.png" alt="">
</div>
<div class="frame" v-if="showFrame">
<div class="close" @click="showFrame = false">
<img src="../assets/close_fill.png" alt="">
</div>
<iframe :src="flowSrc" style="height: 100%;width: 100%;margin: 0;border: 0;" frameborder="0"></iframe>
</div>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "MyHome",
data() {
//
return {
showFrame: false,
flowSrc: ''
};
},
methods: {
goList() {
this.$router.push('/list')
},
goframe(src) {
this.flowSrc = src
if (!this.flowSrc) {
return
}
this.showFrame = true
}
},
// - 访DOM
mounted() { },
};
</script>
<style scoped>
.home {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: whitesmoke;
}
.image {
position: relative;
width: 100%;
}
.frame {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
}
.close {
position: absolute;
z-index: 1000;
right: 0.3rem;
bottom: 1.3rem;
width: 1rem;
height: 1rem;
}
.close img {
display: block;
width: 100%;
}
.image div {
display: flex;
justify-content: space-between;
}
.top1 {
position: absolute;
z-index: 1;
width: 70.3%;
height: 13.5%;
top: 5.1%;
left: 12.7%;
}
.top {
position: absolute;
z-index: 1;
width: 77.5%;
height: 19%;
top: 22.8%;
left: 15.5%;
}
.middle {
position: absolute;
z-index: 1;
width: 86.5%;
height: 19.8%;
top: 46.6%;
left: 6.7%;
}
.bottom {
position: absolute;
z-index: 1;
width: 87.5%;
height: 19.8%;
top: 70.9%;
left: 14.6%;
}
</style>

@ -0,0 +1,162 @@
<template>
<div class="list">
<div class="top-navbar">
<img src="../assets/back.png" alt="" @click="goBack">
<!-- <div class="back-button">返回</div> -->
<!-- <div class="title">视频专栏</div> -->
</div>
<ul>
<li class="list-item" v-for="video in videos" :key="video.id">
<div @click="goframe(video.url)">
<div class="video-preview">
<div class="time">{{ video.time }}</div>
<img :src="video.previewImage" alt="视频预览图">
</div>
<div class="video-title">
{{ video.title }}
</div>
</div>
</li>
</ul>
<div class="frame" v-if="showFrame">
<div class="close" @click="showFrame = false">
<img src="../assets/close_fill_white.png" alt="">
</div>
<iframe :src="flowSrc" style="height: 100%;width: 100%;margin: 0;border: 0;" frameborder="0"></iframe>
</div>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "MyList",
data() {
//
return {
videos: [
{ id: 1, time: '15:24', title: '学习贯彻习近平新时代中国特色社会主义思想主题教育工作会议在京召开', url: 'https://boot-video.xuexi.cn/video/1004/p/67798f2cafabace13dd747dd1d3aa87d-128b6da6578a47bc8c506a11ef8dd4ed-2.mp4', previewImage: 'https://boot-img.xuexi.cn/image/1005/process/50b12b78874c48f3ba36bf0e565d93b2.jpg' },
{ id: 2, time: '05:33', title: '【学习贯彻习近平新时代中国特色社会主义思想主题教育】学思想 担使命 踔厉奋进新征程', url: 'https://boot-video.xuexi.cn/video/1004/p/14feaef1391a1feedc0f4b2b58ea0dc2-ed9494b201404bf5b1afb0ab5546cbb0-2.mp4', previewImage: 'https://boot-img.xuexi.cn/image/1005/process/6d58a9af91b04753b02ae8e28f61966d.jpg' },
{ id: 3, time: '05:42', title: '【学习贯彻习近平新时代中国特色社会主义思想主题教育】感悟思想伟力 凝聚奋进力量', url: 'https://boot-video.xuexi.cn/video/1004/p/9b733577135ebe969bb11ec08d0637bd-f0393c782e8f40e2873e78e3e37d634b-2.mp4', previewImage: 'https://boot-img.xuexi.cn/image/1005/process/e0c870662f5a420aa98ec575afa17ffb.jpg' }
],
showFrame: false,
flowSrc: ''
};
},
methods: {
goBack() {
this.$router.go(-1);
},
goframe(src) {
console.log(src)
this.flowSrc = src
if (!this.flowSrc) {
return
}
this.showFrame = true
}
},
// - 访DOM
mounted() { },
};
</script>
<style scoped>
.list {
position: relative;
min-height: 100vh;
padding-bottom: 70px;
background-color: whitesmoke;
box-sizing: border-box;
}
.frame {
position: absolute;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
}
.close {
position: absolute;
z-index: 1000;
right: 0.3rem;
bottom: 0.3rem;
width: 1rem;
height: 1rem;
}
.close img {
display: block;
width: 100%;
}
.top-navbar {
position: fixed;
bottom: 0.3rem;
left: 0.3rem;
z-index: 10;
width: 100%;
}
.top-navbar img {
width: 1rem;
}
.back-button {
float: left;
font-size: 0.4rem;
margin-right: 20px;
}
.title {
font-size: 0.4rem;
margin-left: 0.4rem;
}
.list-item {
padding: 0.4rem;
margin: 0 auto 30px;
background-color: #fff;
width: 60%;
}
.list-item:last-child {
margin-bottom: 0;
}
.video-preview {
position: relative;
/* 修改这一行,将预览图居中 */
}
.time {
position: absolute;
bottom: 20px;
right: 20px;
width: 100px;
height: 40px;
border-radius: 50px;
background-color: rgba(0, 0, 0, .4);
font-size: 0.3rem;
color: #fff;
line-height: 40px;
text-align: center;
}
.video-preview img {
width: 100%;
border-radius: 20px;
}
.video-title {
display: flex;
align-items: center;
justify-content: center;
/* 修改这一行,使标题居中 */
margin-top: 10px;
/* 添加这一行,使标题与预览图有一定的间距 */
font-size: 0.35rem;
}</style>

@ -0,0 +1,13 @@
// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
// transpileDependencies: true
// })
module.exports = {
publicPath: '/',
// 关闭打包生成map文件
productionSourceMap: false,
// 关闭ESLINT校验工具
lintOnSave: false,
css: {},
configureWebpack: config => { config.entry.app = ["@babel/polyfill", "./src/main.js"]; },
}
Loading…
Cancel
Save