├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── data
    └── local.js
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── css
    │   │   └── reset.css
    │   ├── images
    │   │   ├── fan.png
    │   │   ├── icon
    │   │   │   ├── arrow-right.png
    │   │   │   ├── chat.png
    │   │   │   ├── chat1.png
    │   │   │   ├── collection-anti.png
    │   │   │   ├── collection.png
    │   │   │   ├── location.png
    │   │   │   ├── none-star.png
    │   │   │   ├── search.png
    │   │   │   ├── share-anti.png
    │   │   │   ├── share.png
    │   │   │   ├── star.png
    │   │   │   ├── view.png
    │   │   │   └── xx.png
    │   │   ├── item.jpg
    │   │   ├── music.png
    │   │   ├── mv.png
    │   │   ├── p0.png
    │   │   ├── pause.png
    │   │   ├── pinglun.png
    │   │   ├── play.png
    │   │   ├── search.png
    │   │   ├── selected-music.png
    │   │   ├── selected-mv.png
    │   │   └── timg.gif
    │   └── logo.png
    ├── components
    │   ├── Item.vue
    │   ├── Loading.vue
    │   └── Movie.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── utils
    │   ├── config.js
    │   └── filter.js
    └── views
    │   ├── Movie
    │       ├── Movie.vue
    │       ├── MovieDetail.vue
    │       └── MovieMore.vue
    │   ├── Music
    │       ├── Music.vue
    │       ├── MusicDetail.vue
    │       ├── MusicMore.vue
    │       ├── MusicPlay.vue
    │       └── components
    │       │   └── Itemmusic.vue
    │   ├── My
    │       └── My.vue
    │   └── Read
    │       ├── Read.vue
    │       └── ReadDetail.vue
├── vue.config.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # xiangmu
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/data/local.js:
--------------------------------------------------------------------------------
 1 | [{
 2 |     "date": "Sep 18 2016",
 3 |     "title": "正是虾肥蟹壮时",
 4 |     "imgSrc": "https://i.loli.net/2019/10/21/8Qrtav6KsE7XGjM.png",
 5 |     "avatar": "https://i.loli.net/2019/10/21/tLaWIlGzAPeudjn.png",
 6 |     "content": "菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，",
 7 |     "reading": "112",
 8 |     "collection": "96",
 9 |     "headImgSrc": "https://i.loli.net/2019/10/21/8Qrtav6KsE7XGjM.png",
10 |     "author": "林白衣",
11 |     "dateTime": "24小时前",
12 |     "detail": "菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\n\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。",
13 |     "postId": 0,
14 |     "music": {
15 |         "url": "http://music.163.com/song/media/outer/url?id=557584888",
16 |         "title": "往后余生",
17 |         "coverImg": "http://p4.music.126.net/J-So8uu3Mo9zKfN128L_pQ==/109951162875623128.jpg"
18 |     }
19 | },
20 | {
21 |     "title": "比利·林恩的中场故事",
22 |     "content": "一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。",
23 |     "imgSrc": "https://i.loli.net/2019/10/21/4bGdIeEUqmZhKAV.png",
24 |     "reading": 62,
25 |     "detail": "一 “李安是一位绝不会重复自己的导演，本片将极富原创性”李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。预告片首次曝光后，被视作是明年奥斯卡种子选手。该片根据同名畅销书改编。原著小说荣获美国国家图书奖。也被BBC评为21世纪最伟大的12本英文小说之一。影片讲述一位19岁德州男孩的比利·林恩入伍参加伊战，在一次交火中他大难不死，意外与战友成为大众的关注焦点，并被塑造成英雄。之后他们返回国内，在橄榄球赛中场休息时授勋。这名战争英雄却面临前所未有的心灵煎熬……李安为什么选中这部电影来拍？因为李安想要挑战前所未有的技术难题：以120帧每秒的速度、4K、3D技术全面结合，来掀起一场电影视觉革命。什么意思？所谓“电影是24格每秒的谎言”，其中的24格，就是帧数。",
26 |     "collection": 92,
27 |     "dateTime": "24小时前",
28 |     "headImgSrc": "https://i.loli.net/2019/10/21/4bGdIeEUqmZhKAV.png",
29 |     "author": "迷的城",
30 |     "date": "Nov 20 2016",
31 |     "avatar": "https://i.loli.net/2019/10/21/576PQlbHG3uTm4s.png",
32 |     "postId": 1,
33 |     "music": {
34 |         "url": "http://music.163.com/song/media/outer/url?id=30814948",
35 |         "title": "从前慢",
36 |         "coverImg": "http://y.gtimg.cn/music/photo_new/T002R150x150M000002xOmp62kqSic.jpg?max_age=2592000"
37 |     }
38 | },
39 | {
40 |     "title": "当我们在谈论经济学时，我们在谈论什么?",
41 |     "content": "引言在我跟学生课后交流时，以及我在知乎上阅读有关“经济”问题的论题时，经常会遇到这样的情况：...",
42 |     "detail": "1 引言\n\n在我跟学生课后交流时，以及我在知乎上阅读有关“经济”问题的论题时，经常会遇到这样的情况：有些人套用“经济理论“的知识去解释现实中发生的经济事件，结果发现很多事情讲不通，或者发现”理论告诉我们的“与现实发生的是相反的。也有学生经常跟我说：经济学有什么用？为了说明这个，我经常从两个方面来进行解释，尝试用我个人所擅长的解决问题的视角和他们能够听懂的方法来说明经济学是什么，它的作用边界在哪里：\r\n\n2 ”简笔素描“与”油画肖像“我们给人画肖像画，可以用简笔素描，也可以用油画肖像。油画肖像可以在最大程度上保存了人物的各方面的细节和特点，而简笔素描则忽略了很多细节。尽管简笔素描忽略了人物的许多细节，但我们仍旧能够很容易的认出画中的人物是谁。为什么？因为这种方法保留了人物最显著的特征，以至于我们可以忽略其次要特征而对人物做出判定。\n\n2.1 ”简笔素描“对于绝大多数的非经济学专业大众而言（经济学相关专业硕士学历以上），人们所接触到的经济学都是初级微观经济学。所谓的初级微观经济学，对于经济问题的”画法“就是一种”简笔素描“。比如初级微观经济学教材中广为使用的这种一元一次需求函数：y=bx+a，需求量的唯一变量是产品价格。但仅凭直觉我们就可以断言，现实中影响需求量的因素绝不止价格这一种，因此我们可以认为这个模型对经济问题的描述是失真的。然而但这种失真却是必要的和有意义的，其意义在与它利于揭示价格对于需求的影响，而不在于否定影响需求的其他因素——",
43 |     "imgSrc": "https://i.loli.net/2019/10/21/arO4bo193jphTel.png",
44 |     "headImgSrc": "https://i.loli.net/2019/10/21/arO4bo193jphTel.png",
45 |     "reading": 62,
46 |     "collection": 92,
47 |     "author": "知乎",
48 |     "date": "Nov 12 2016",
49 |     "dateTime": "三天前",
50 |     "avatar": "https://i.loli.net/2019/10/21/Qg5XtAaGKu7CWlE.png",
51 |     "postId": 2,
52 |     "music": {
53 |         "url": "http://music.163.com/song/media/outer/url?id=32835566",
54 |         "title": "从前的我",
55 |         "coverImg": "http://p3.music.126.net/1qdwtD9QaawDmX3JUE9raw==/109951162932623462.jpg"
56 |     }
57 | },
58 | {
59 |     "title": "从视觉到触觉 这款VR手套能给你真实触感",
60 |     "content": "8月29日消息，据国外媒体VentureBeat报道，一家名为Dexta Robotics的公司最近发布了一款有望变革虚拟现实手部追踪与交互方式的新产品",
61 |     "imgSrc": "https://i.loli.net/2019/10/21/PcZYUaiDTbAH8yt.png",
62 |     "reading": 102,
63 |     "detail": "消息，据国外媒体VentureBeat报道，一家名为Dexta Robotics的公司最近发布了一款有望变革虚拟现实手部追踪与交互方式的新产品。该产品名为“Dexmo”，它是一款像手套那样戴在手上使用的未来主义外骨骼。它内置大量的元件，能够与VR体验进行交互，可帮助你感觉握在你的双手的虚拟物体。Dexmo据Dexta称，“Dexmo是一款针对你的双手的机械外骨骼。它能够捕捉你的手部运动，以及提供即时的力反馈。有了Dexmo，你可以感受到虚拟物体的大小、形状和坚硬度。你可以接触数字世界。”市面上已经有数款产品旨在处理虚拟现实中的手部交互，也有相关的产品即将要进入市场。例如，颇受欢迎的HTC Vive头盔配有一副控制器，其控制器能够使得追踪系统看到你的双手，让你可以用它们来在特定体验中与物体进行交互。今年晚些时候，Oculus将开始出货类似的手部控制产品Oculus Touch。10月，索尼也将开始出货配备两个PlayStation Move手部控制器的PS VR。Leap Motion甚至更进一步：利用传感器来追踪手指和手部的运动。",
64 |     "collection": 26,
65 |     "dateTime": "24小时前",
66 |     "headImgSrc": "https://i.loli.net/2019/10/21/PcZYUaiDTbAH8yt.png",
67 |     "author": "深白色",
68 |     "date": "Nov 20 2016",
69 |     "avatar": "https://i.loli.net/2019/10/21/KMiCf5XBoqId86r.png",
70 |     "postId": 4,
71 |     "music": {
72 |         "url": "http://music.163.com/song/media/outer/url?id=32835566",
73 |         "title": "往后余生",
74 |         "coverImg": "http://p3.music.126.net/T1nKA7zWLb8Y2vnzc5CeCQ==/3431575792207860.jpg"
75 |     }
76 | },
77 | {
78 |     "title": "爱奇艺创维开展战略合作，合力布局开放娱乐生态",
79 |     "content": "爱奇艺和创维分别作为国内领先的在线视频品牌",
80 |     "imgSrc": "https://i.loli.net/2019/10/21/dNqHFTL1UC3kxGa.png",
81 |     "reading": 96,
82 |     "detail": "爱奇艺和创维分别作为国内领先的在线视频品牌和家电品牌。双方一直锐意创新，为用户提供优质的服务体验和产品体验。据悉，爱奇艺与创维将展开从资本到VIP会员服务等各方面的深入合作。籍由此次合作，爱奇艺将战略投资创维旗下拥有高端互联网电视品牌的酷开公司。从下一财年开始，创维旗下互联网电视将通过银河互联网电视集成播控平台，预置VIP会员服务及相关内容。这种捆绑终端与VIP内容的全新销售模式，将大幅提升互联网电视终端用户的体验，给予用户更多优质内容的选择。",
83 |     "collection": 26,
84 |     "dateTime": "21小时前",
85 |     "headImgSrc": "https://i.loli.net/2019/10/21/dNqHFTL1UC3kxGa.png",
86 |     "author": "深白色",
87 |     "date": "Nov 20 2016",
88 |     "avatar": " https://i.loli.net/2019/10/21/Qg5XtAaGKu7CWlE.png",
89 |     "postId": 5,
90 |     "music": {
91 |         "url": "http://music.163.com/song/media/outer/url?id=186240",
92 |         "title": "朋友-谭咏麟",
93 |         "coverImg": "http://p4.music.126.net/9PrJFGyL4jvNEQ1vFjMzzA==/3442570914300329.jpg"
94 |     }
95 | }]


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xiangmu",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.0",
12 |     "core-js": "^3.3.2",
13 |     "lib-flexible": "^0.3.2",
14 |     "postcss-pxtorem": "^4.0.1",
15 |     "vant": "^2.2.15",
16 |     "vue": "^2.6.10",
17 |     "vue-amap": "^0.5.10",
18 |     "vue-router": "^3.1.3"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "^4.0.0",
22 |     "@vue/cli-plugin-eslint": "^4.0.0",
23 |     "@vue/cli-plugin-router": "^4.0.0",
24 |     "@vue/cli-service": "^4.0.0",
25 |     "babel-eslint": "^10.0.3",
26 |     "eslint": "^5.16.0",
27 |     "eslint-plugin-vue": "^5.0.0",
28 |     "vue-template-compiler": "^2.6.10"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins:{
3 |       "postcss-pxtorem":{
4 |           "rootValue":75,
5 |           "propList":["*"]
6 |       }
7 |   }
8 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>项目</title>
 9 |     <meta name="referrer" content="never">
10 |     <link rel="stylesheet" href="https://at.alicdn.com/t/font_1513125_ezdl9yil41.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but xiangmu doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link class="music" to="/music">
 5 |         <i class="iconfont icon-yinle"></i> 音乐
 6 |       </router-link>
 7 |       <router-link class="movie" to="/movie">
 8 |         <i class="iconfont icon-dianying"></i>电影
 9 |       </router-link>
10 |       <router-link class="read" to="/read">
11 |         <i class="iconfont icon-yuedureading19"></i>阅读
12 |       </router-link>
13 |       <router-link class="my" to="/my">
14 |         <i class="iconfont icon-wodedangxuan"></i>我的
15 |       </router-link>
16 |     </div>
17 |     <router-view />
18 |   </div>
19 | </template>
20 | 
21 | <style>
22 | #app {
23 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
24 |   -webkit-font-smoothing: antialiased;
25 |   -moz-osx-font-smoothing: grayscale;
26 |   color: #2c3e50;
27 |   width: 10rem;
28 |   margin: 0 auto;
29 |   min-height: 100%;
30 |    padding-bottom: 80px;
31 | }
32 | #nav {
33 |   width: 10rem;
34 |   text-align: center;
35 |   display: flex;
36 |   justify-content: space-evenly;
37 |   position: fixed;
38 |   bottom: 0;
39 |   z-index: 10;
40 |   background: #ebebee;
41 |   padding: 0;
42 | }
43 | 
44 | #nav a {
45 |   font-weight: bold;
46 |   color: #2c3e50;
47 | }
48 | 
49 | #nav a.router-link-exact-active {
50 |   color: #42b983;
51 | }
52 | a {
53 |   text-decoration: none;
54 | }
55 | .music,
56 | .movie,
57 | .read,
58 | .my {
59 |   display: flex;
60 |   flex-direction: column;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/assets/css/reset.css:
--------------------------------------------------------------------------------
 1 | html, body, div, span, applet, object, iframe,
 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 3 | a, abbr, acronym, address, big, cite, code,
 4 | del, dfn, em, img, ins, kbd, q, s, samp,
 5 | small, strike, strong, sub, sup, tt, var,
 6 | b, u, i, center,
 7 | dl, dt, dd, ol, ul, li,
 8 | fieldset, form, label, legend,
 9 | table, caption, tbody, tfoot, thead, tr, th, td,
10 | article, aside, canvas, details, embed, 
11 | figure, figcaption, footer, header, hgroup, 
12 | menu, nav, output, ruby, section, summary,
13 | time, mark, audio, video {
14 | 	margin: 0;
15 | 	padding: 0;
16 | 	border: 0;
17 | 	font-size: 100%;
18 | 	font: inherit;
19 | 	vertical-align: baseline;
20 | }
21 | /* HTML5 display-role reset for older browsers */
22 | article, aside, details, figcaption, figure, 
23 | footer, header, hgroup, menu, nav, section {
24 | 	display: block;
25 | }
26 | body {
27 | 	line-height: 1;
28 | }
29 | ol, ul {
30 | 	list-style: none;
31 | }
32 | blockquote, q {
33 | 	quotes: none;
34 | }
35 | blockquote:before, blockquote:after,
36 | q:before, q:after {
37 | 	content: '';
38 | 	content: none;
39 | }
40 | table {
41 | 	border-collapse: collapse;
42 | 	border-spacing: 0;
43 | }


--------------------------------------------------------------------------------
/src/assets/images/fan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/fan.png


--------------------------------------------------------------------------------
/src/assets/images/icon/arrow-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/arrow-right.png


--------------------------------------------------------------------------------
/src/assets/images/icon/chat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/chat.png


--------------------------------------------------------------------------------
/src/assets/images/icon/chat1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/chat1.png


--------------------------------------------------------------------------------
/src/assets/images/icon/collection-anti.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/collection-anti.png


--------------------------------------------------------------------------------
/src/assets/images/icon/collection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/collection.png


--------------------------------------------------------------------------------
/src/assets/images/icon/location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/location.png


--------------------------------------------------------------------------------
/src/assets/images/icon/none-star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/none-star.png


--------------------------------------------------------------------------------
/src/assets/images/icon/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/search.png


--------------------------------------------------------------------------------
/src/assets/images/icon/share-anti.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/share-anti.png


--------------------------------------------------------------------------------
/src/assets/images/icon/share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/share.png


--------------------------------------------------------------------------------
/src/assets/images/icon/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/star.png


--------------------------------------------------------------------------------
/src/assets/images/icon/view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/view.png


--------------------------------------------------------------------------------
/src/assets/images/icon/xx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/icon/xx.png


--------------------------------------------------------------------------------
/src/assets/images/item.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/item.jpg


--------------------------------------------------------------------------------
/src/assets/images/music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/music.png


--------------------------------------------------------------------------------
/src/assets/images/mv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/mv.png


--------------------------------------------------------------------------------
/src/assets/images/p0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/p0.png


--------------------------------------------------------------------------------
/src/assets/images/pause.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/pause.png


--------------------------------------------------------------------------------
/src/assets/images/pinglun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/pinglun.png


--------------------------------------------------------------------------------
/src/assets/images/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/play.png


--------------------------------------------------------------------------------
/src/assets/images/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/search.png


--------------------------------------------------------------------------------
/src/assets/images/selected-music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/selected-music.png


--------------------------------------------------------------------------------
/src/assets/images/selected-mv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/selected-mv.png


--------------------------------------------------------------------------------
/src/assets/images/timg.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/images/timg.gif


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jiangnan1014/vueDesign/398a3afe1b4c53d77a32f0723b8ef59260c7fc82/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-link :to="{name:'musicdetail',params:{id:data.id}}">
 3 |     <div class="content">
 4 |       <p class="icon"><img  src="../assets/images/p0.png" alt="">{{data.playCount}}</p>
 5 |       <img :src="data.coverImgUrl" alt />
 6 |       <p>{{data.name |format()}}</p>
 7 |     </div>
 8 |   </router-link>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "Item",
14 |   props: {
15 |     data: {
16 |       type: Object,
17 |       require: true
18 |     }
19 |   }
20 | };
21 | </script>
22 | 
23 | <style scoped>
24 | img {
25 |   width: 230px;
26 |   height: 230px;
27 | }
28 | p {
29 |   color: #333;
30 | }
31 | .content{
32 |   position: relative;
33 | }
34 | .icon img{
35 |   width: 30px;
36 |   height: 30px;
37 | }
38 | .icon{
39 |   position: absolute;
40 |   top: 5px;
41 |   right: 15px;
42 |   color: #fff;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/components/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="loading">
 3 |   <img src="../assets/images/timg.gif" alt="">
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Loading', 
10 | 
11 | }
12 | </script>
13 | 
14 | <style scoped>
15 | .loading {
16 |   position: fixed;
17 |   left: 0;
18 |   top: 0;
19 |   background:  #fff;
20 |   width: 100%;
21 |   height: 400px;
22 |   z-index: 100;
23 | }
24 | </style>


--------------------------------------------------------------------------------
/src/components/Movie.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-link :to="{name:'moviedetail',params:{id:data.id}}">
 3 |     <div class="content">
 4 |       <img :src="data.images.large" alt />
 5 |       <p>{{data.title |format()}}</p>
 6 |     </div>
 7 |   </router-link>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: "Movie",
13 |   props: {
14 |     data: {
15 |       type: Object,
16 |       require: true
17 |     }
18 |   }
19 | };
20 | </script>
21 | 
22 | <style scoped>
23 | img {
24 |   width: 230px;
25 |   height: 230px;
26 | }
27 | p {
28 |   color: #333;
29 | }
30 | .content {
31 |   position: relative;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import './utils/config'
 5 | import './utils/filter'
 6 | import VueAMap from 'vue-amap';
 7 | 
 8 | Vue.config.productionTip = false
 9 | Vue.use(VueAMap);
10 | new Vue({
11 |   router,
12 |   render: h => h(App)
13 | }).$mount('#app')
14 | 
15 | VueAMap.initAMapApiLoader({
16 |   // 高德的key
17 |   key: '90c1427bc63e27b50cc3c94955cb8d8b',
18 |   // 插件集合
19 |   plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
20 |   // 高德 sdk 版本，默认为 1.4.4
21 |   v: '1.4.4'
22 | });


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | Vue.use(VueRouter)
 4 | 
 5 | const routes = [
 6 |   {
 7 |     path: '/music',
 8 |     name: 'music',
 9 |     component:()=>import('../views/Music/Music.vue')
10 |   },
11 |   {
12 |     path:'/movie',
13 |     name:'movie',
14 |     component:()=>import('../views/Movie/Movie.vue')
15 |   },
16 |   {
17 |     path: '/about',
18 |     name: 'about',
19 |     // route level code-splitting
20 |     // this generates a separate chunk (about.[hash].js) for this route
21 |     // which is lazy-loaded when the route is visited.
22 |     component: () => import(/* webpackChunkName: "about" */ '../views/Movie/Movie.vue')
23 |   },
24 |   {
25 |     path:'/read',
26 |     name:'read',
27 |     component:()=>import('../views/Read/Read.vue')
28 |   },
29 |   {
30 |     path:'/my',
31 |     name:'my',
32 |     component:()=>import('../views/My/My.vue')
33 |   },
34 |   {
35 |     path:'/musicmore',
36 |     name:'musicmore',
37 |     component:()=>import('../views/Music/MusicMore.vue')
38 |   },
39 |   {
40 |     path:'/musicdetail/:id',
41 |     name:'musicdetail',
42 |     component:()=>import('../views/Music/MusicDetail.vue')
43 |   },
44 |   {
45 |     path:'/musicplay',
46 |     name:'musicplay',
47 |     component:()=>import('../views/Music/MusicPlay.vue'),
48 |     props:true
49 |   },
50 |   {
51 |     path:'/moviedetail/:id',
52 |     name:'moviedetail',
53 |     component:()=>import('../views/Movie/MovieDetail.vue')
54 |   },{
55 |     path:'/moviemore',
56 |     name:'moviemore',
57 |     component:()=>import('../views/Movie/MovieMore.vue')
58 |   },
59 |   {
60 |     path:'/',
61 |     redirect:"/music"
62 |   },
63 |   {
64 |     path:'/ReadDetail',
65 |     name:'ReadDetail',
66 |     component:()=>import('../views/Read/ReadDetail.vue')
67 |   }
68 | ]
69 | 
70 | const router = new VueRouter({
71 |   mode: 'history',
72 |   base: process.env.BASE_URL,
73 |   routes
74 | })
75 | 
76 | export default router
77 | 


--------------------------------------------------------------------------------
/src/utils/config.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import 'lib-flexible/flexible.js'
 3 | import '@/assets/css/reset.css'
 4 | import axios from 'axios'
 5 | import Item from '@/components/Item.vue'
 6 | import Movie from '@/components/Movie.vue'
 7 | import Loading from '@/components/Loading.vue'
 8 | import Vant from 'vant'
 9 | import 'vant/lib/index.css'
10 | 
11 | axios.defaults.baseURL = 'http://musicapi.leanapp.cn/';
12 | 
13 | Vue.prototype.axios = axios
14 | 
15 | Vue.use(Vant)
16 | Vue.component('Item',Item)
17 | Vue.component('Movie',Movie)
18 | Vue.component('Loading',Loading)


--------------------------------------------------------------------------------
/src/utils/filter.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | Vue.filter("format", function (val) {
 3 |     if (val.length > 7) {
 4 |         val = val.slice(0, 7) + "..."
 5 |     }
 6 |     return val
 7 | })
 8 | Vue.filter("time",function(val){
 9 |     if(val){
10 |       var minu =  Math.floor((val/1000/60))
11 |       if(minu<10){
12 |         minu = "0"+minu
13 |       }
14 |       var seconds = Math.floor((val/1000)%60)
15 |       if(seconds<10){
16 |         seconds = "0"+seconds
17 |       }
18 |       val = minu + ":" +seconds
19 |     }
20 |     return val
21 | })
22 | Vue.filter("number",function(val){
23 |     if(val<10){
24 |         val = "0"+val
25 |         return val
26 |     }else{
27 |         return val
28 |     }
29 | })


--------------------------------------------------------------------------------
/src/views/Movie/Movie.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-for="item of movies" :key="item.id">
 4 |       <div >
 5 |         <div class="nav">
 6 |           <span class="title">{{item.title}}</span>
 7 |           <span  @click="handleMore(item.subTitle,item.title)">更多</span>
 8 |         </div>
 9 |       </div>
10 |       <div class="val">
11 |         <Movie v-for="val of item.data" :key="val.id" :data="val" />
12 |       </div>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   data() {
20 |     return {
21 |       movies: {}
22 |     };
23 |   },
24 |   async mounted() {
25 |     await this.axios
26 |       .get("https://douban.uieee.com/v2/movie/top250")
27 |       .then(res => {
28 |         this.movies.top250 = {};
29 |         this.movies.top250.title = "豆瓣top250";
30 |         this.movies.top250.subTitle = "top250";
31 |         this.movies.top250.data = res.data.subjects.slice(0, 6);
32 |         this.$forceUpdate();
33 |       });
34 |     await this.axios
35 |       .get("https://douban.uieee.com/v2/movie/in_theaters")
36 |       .then(res => {
37 |         this.movies.inTheaters = {};
38 |         this.movies.inTheaters.title = "正在热映";
39 |         this.movies.inTheaters.subTitle = "in_theaters";
40 |         this.movies.inTheaters.data = res.data.subjects.slice(0, 6);
41 |         this.$forceUpdate();
42 |       });
43 |     await this.axios
44 |       .get("https://douban.uieee.com/v2/movie/coming_soon")
45 |       .then(res => {
46 |         this.movies.comingSoon = {};
47 |         this.movies.comingSoon.title = "即将上映";
48 |         this.movies.comingSoon.subTitle = "coming_soon";
49 |         this.movies.comingSoon.data = res.data.subjects.slice(0, 6);
50 |         this.$forceUpdate();
51 |       });
52 |   },
53 |   methods:{
54 |        handleMore(subTitle,title){
55 |            this.$router.push({name:'moviemore',query:{subTitle,title}})
56 |        }
57 |   }
58 | };
59 | </script>
60 | 
61 | <style  scoped>
62 | .nav {
63 |   display: flex;
64 |   justify-content: space-between;
65 |   
66 |   margin: 30px 0;
67 | }
68 | .nav span {
69 |   font-size: 30px;
70 | }
71 | .val {
72 |   display: flex;
73 |   justify-content: space-evenly;
74 |       flex-wrap: wrap;
75 | }
76 | .nav .title{
77 |   color: red;
78 |   font-size: 40px;
79 | }
80 | </style>


--------------------------------------------------------------------------------
/src/views/Movie/MovieDetail.vue:
--------------------------------------------------------------------------------
  1 | <template >
  2 |   <div v-if="movies">
  3 |      <Loading v-if="isLoading" />
  4 |     <div class="container">
  5 |       <div class="nav">
  6 |         <img @click="handleBack" src="../../assets/images/fan.png" alt />
  7 |         <span></span>
  8 |         <span></span>
  9 |       </div>
 10 |       <div class="top">
 11 |         <div class="bg">
 12 |           <img :src="movies.images.large" alt />
 13 |         </div>
 14 |         <div class="top-title">
 15 |           <span>{{movies.title}}</span>
 16 |           <span class="score">{{movies.rating.average}}分</span>
 17 |           <p>{{movies.genres[0]}} {{movies.genres[1]}} {{movies.genres[2]}}</p>
 18 |           <p>{{movies.pubdate}}上映</p>
 19 |           <p>{{movies.countries[0]}}|{{movies.durations[0]}}</p>
 20 |           <p @click="handleClick" :class="{ expansion : active }">{{movies.summary}}</p>
 21 |         </div>
 22 |       </div>
 23 |       <div class="box">
 24 |         <h1>演职人员</h1>
 25 |         <div class="figure">
 26 |           <div class="wrap">
 27 |             <!-- <img class="user" :src="movies.directors[0].avatars.large" alt />
 28 |             <p class="user-title">{{movies.directors[0].name}}</p>-->
 29 |             <div class="box-item" v-for="item of movies.casts" :key="item.id">
 30 |               <img class="user" :src="item.avatars.medium" alt />
 31 |               <p class="user-title">{{item.name}}</p>
 32 |               <!-- <p class="user-name">江南</p> -->
 33 |             </div>
 34 |           </div>
 35 |         </div>
 36 |       </div>
 37 |     </div>
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 | export default {
 43 |   name: "Detail",
 44 |   data() {
 45 |     return {
 46 |       movies: "",
 47 |       opacity: 0,
 48 |       active: true,
 49 |       isLoading:true
 50 |     };
 51 |   },
 52 |   mounted() {
 53 |     window.addEventListener("scroll", this.handle);
 54 |     var id = this.$route.params.id;
 55 |     var url = `https://douban-api.uieee.com/v2/movie/subject/${id}`;
 56 |     this.axios.get(url).then(res => {
 57 |       this.movies = res.data;
 58 |       this.isLoading = false;
 59 |     });
 60 |   },
 61 |   methods: {
 62 |     toggle() {
 63 |       this.$router.back();
 64 |     },
 65 |     handle() {
 66 |       var height = document.documentElement.scrollTop;
 67 |       if (height > 0) {
 68 |         this.opacity = 1;
 69 |       } else {
 70 |         this.opacity = 0;
 71 |       }
 72 |     },
 73 |     handleClick() {
 74 |       this.active = !this.active;
 75 |     },
 76 |     handleBack() {
 77 |       this.$router.back();
 78 |     }
 79 |   },
 80 |   destroyed() {
 81 |     window.removeEventListener("scroll", this.handle);
 82 |   }
 83 | };
 84 | </script>
 85 | 
 86 | <style scoped>
 87 | .container {
 88 |   background: #ebebeb;
 89 |   height: 2000px;
 90 |   position: relative;
 91 | }
 92 | .return {
 93 |   widows: 50px;
 94 |   height: 50px;
 95 |   padding: 10px;
 96 |   border-radius: 50%;
 97 |   background: #fff;
 98 |   position: fixed;
 99 |   top: 16px;
100 |   left: 20px;
101 |   opacity: 0.5;
102 |   z-index: 30;
103 | }
104 | .nav-title {
105 |   font-size: 34px;
106 |   text-align: center;
107 |   width: 10rem;
108 |   line-height: 88px;
109 |   position: fixed;
110 |   top: 0;
111 |   background: #fff;
112 |   z-index: 20;
113 | }
114 | .top {
115 |   background: #fff;
116 |   margin-bottom: 40px;
117 | }
118 | .bg {
119 |   width: 10rem;
120 |   height: 420px;
121 |   display: flex;
122 |   justify-content: center;
123 |   align-items: center;
124 |   overflow: hidden;
125 |   position: relative;
126 | }
127 | .bg img {
128 |   width: 100%;
129 | }
130 | .top-title {
131 |   padding: 30px;
132 | }
133 | .top-title span {
134 |   padding-top: 18px;
135 |   color: #191a1b;
136 |   font-size: 34px;
137 | }
138 | .top-title .score {
139 |   float: right;
140 |   color: #ffb232;
141 |   font-size: 36px;
142 |   font-style: italic;
143 | }
144 | .top-title p {
145 |   font-size: 26px;
146 |   margin-top: 20px;
147 |   color: #797d82;
148 | }
149 | .box {
150 |   background: #fff;
151 |   padding: 30px;
152 | }
153 | .box h1 {
154 |   font-size: 30px;
155 |   margin-bottom: 20px;
156 | }
157 | .user {
158 |   width: 170px;
159 |   height: 170px;
160 |   padding: 20px 0;
161 | }
162 | .user-title {
163 |   font-size: 24px;
164 |   color: #191a1b;
165 |   width: 170px;
166 |   height: 36px;
167 |   overflow: hidden;
168 |   text-overflow: ellipsis;
169 |   white-space: nowrap;
170 | }
171 | .user-name {
172 |   font-size: 20px;
173 |   color: #797d82;
174 |   overflow: hidden;
175 |   text-overflow: ellipsis;
176 |   white-space: nowrap;
177 | }
178 | .figure {
179 |   overflow-x: auto;
180 |   overflow-y: hidden;
181 | }
182 | .figure::-webkit-scrollbar {
183 |   display: none;
184 | }
185 | .wrap {
186 |   display: grid;
187 |   grid-template-columns: repeat(6, 170px);
188 |   grid-column-gap: 20px;
189 | }
190 | .expansion {
191 |   white-space: pre-line;
192 |   width: 100%;
193 |   overflow: hidden;
194 |   -webkit-line-clamp: 2;
195 |   text-overflow: ellipsis;
196 |   display: -webkit-box;
197 |   -webkit-box-orient: vertical;
198 | }
199 | .nav {
200 |   display: flex;
201 |   justify-content: space-between;
202 |   height: 50px;
203 |   line-height: 50px;
204 |   font-size: 30px;
205 | }
206 | .nav img {
207 |   width: 40px;
208 |   height: 40px;
209 | }
210 | </style>


--------------------------------------------------------------------------------
/src/views/Movie/MovieMore.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="nav"><img @click="handleBack" src="../../assets/images/fan.png" alt=""><span>{{title}}</span><span></span></div>
 4 |     <div class="val">
 5 |       <Movie v-for="item of movies" :key="item.id" :data="item" />
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   data() {
13 |     return {
14 |       movies: [],
15 |       title:[]
16 |     };
17 |   },
18 |   mounted() {
19 |     var subTitle = this.$route.query.subTitle;
20 |     this.title = this.$route.query.title;
21 |     this.axios.get(`https://douban.uieee.com/v2/movie/${subTitle}`).then(res => {
22 |       this.movies = res.data.subjects;
23 |     });
24 |   },
25 |   methods:{
26 |       handleBack(){
27 |           this.$router.back()
28 |       }
29 |   }
30 | };
31 | </script>
32 | 
33 | <style  scoped>
34 | .val {
35 |   display: flex;
36 |   justify-content: space-evenly;
37 |   flex-wrap: wrap;
38 | }
39 | .nav{
40 |     display: flex;
41 |     justify-content: space-between;
42 |     height: 50px;
43 |     line-height: 50px;
44 |     font-size: 30px;
45 | }
46 | .nav img{
47 |     width: 40px;
48 |     height: 40px;
49 | }
50 | </style>


--------------------------------------------------------------------------------
/src/views/Music/Music.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-for="(item,index) of musics" :key="index">
 4 |       <div class="nav">
 5 |         <span class="title">{{item.title}}</span>
 6 |         <span @click="handleMore(item.subTitle,item.title)">更多</span>
 7 |       </div>
 8 |       <div class="val">
 9 |         <Item v-for="val of item.data" :key="val.id" :data="val"></Item>
10 |       </div>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: "Music",
18 |   data() {
19 |     return {
20 |       //   musics: {}
21 |       musics: []
22 |     };
23 |   },
24 |   async mounted() {
25 |     await this.axios.get("top/playlist?order=hot").then(res => {
26 |       var popularsongs = {};
27 |       popularsongs.data = res.data.playlists.slice(0, 6);
28 |       popularsongs.title = "热门歌曲";
29 |       popularsongs.subTitle = "top/playlist?order=hot";
30 |       this.musics.push(popularsongs);
31 |       console.log(1);
32 |     });
33 |     await this.axios.get("top/playlist?cat=日语").then(res => {
34 |       var Japanese = {};
35 |       Japanese.data = res.data.playlists.slice(0, 6);
36 |       Japanese.title = "日本音乐";
37 |       Japanese.subTitle = "top/playlist?cat=日语";
38 |       this.musics.push(Japanese);
39 |     });
40 |     await this.axios.get("top/playlist?cat=韩语").then(res => {
41 |       var radio = {};
42 |       radio.data = res.data.playlists.slice(0, 6);
43 |       radio.title = "韩语电台";
44 |       radio.subTitle = "top/playlist?cat=韩语";
45 |       this.musics.push(radio);
46 |     });
47 |     console.log(4);
48 |   },
49 |   // mounted(){
50 |   //     this.axios
51 |   //       .get("http://192.168.14.14:5000/top/playlist?order=hot")
52 |   //       .then(res => {
53 |   //         this.musics.popularsongs = {};
54 |   //         this.musics.popularsongs.data = res.data.playlists.slice(0, 3);
55 |   //         this.musics.popularsongs.title = "热门歌曲";
56 |   //         this.musics.popularsongs.subTitle = "top/playlist?order=hot";
57 |   //         this.$forceUpdate()  /
58 |   //       });
59 |   // }
60 |   methods: {
61 |     handleMore(subTitle, title) {
62 |       console.log(subTitle, title);
63 |       console.log(title);
64 |       this.$router.push({ name: "musicmore", query: { subTitle, title } });
65 |     }
66 |   }
67 | };
68 | </script>
69 | 
70 | <style scoped>
71 | .val {
72 |   display: flex;
73 |   justify-content: space-evenly;
74 |   flex-wrap: wrap;
75 | }
76 | .nav {
77 |   display: flex;
78 |   justify-content: space-between;
79 | 
80 |   margin: 30px 0;
81 | }
82 | .nav span {
83 |   font-size: 30px;
84 | }
85 | .nav .title{
86 |   color: red;
87 |   font-size: 40px;
88 | }
89 | </style>


--------------------------------------------------------------------------------
/src/views/Music/MusicDetail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="nav">
 4 |       <img @click="handleBack" src="../../assets/images/fan.png" alt />
 5 |       <span></span>
 6 |       <span></span>
 7 |     </div>
 8 |     <img class="bg" :src="playlist.coverImgUrl" alt="">
 9 |     <div class="bo">播放列表:</div>
10 |     <div class="content">
11 |       <!-- <div class="item" v-for="item of playlist.tracks" :key="item.id" @click="handlePlay(item.id)" >
12 |         <img class="user" :src="item.al.picUrl" alt="">
13 |         <p class="name">{{item.name}}</p>
14 |         <img class="play" src="../../assets/images/pause.png" alt="">
15 |       </div> -->
16 |       <Itemmusic  v-for="(item,index) of playlist.tracks" :key="item.id" :index="index" :data="item" @click.native="handlePlay(item.id)"/>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import Itemmusic from './components/Itemmusic'
23 | export default {
24 |   data() {
25 |     return {
26 |       playlist:[]
27 |     };
28 |   },
29 |   components:{
30 |     Itemmusic
31 |   },
32 |   mounted() {
33 |         var id =  this.$route.params.id
34 |         this.axios.get(`http://musicapi.leanapp.cn/playlist/detail?id=${id}`).then(res=>{
35 |           this.playlist = res.data.playlist
36 |         })
37 |   },
38 |   methods: {
39 |     handleBack() {
40 |       this.$router.back();
41 |     },
42 |     handlePlay(id){
43 |       this.$router.push({name:"musicplay",params:{id:id}})
44 |     }
45 |   }
46 | };
47 | </script>
48 | 
49 | <style  scoped>
50 | .nav {
51 |   display: flex;
52 |   justify-content: space-between;
53 |   height: 50px;
54 |   line-height: 50px;
55 |   font-size: 30px;
56 | }
57 | .nav img {
58 |   width: 40px;
59 |   height: 40px;
60 | }
61 | .bg{
62 |   width: 100%;
63 |   height: 500px;;
64 | }
65 | .bo{
66 |   height: 50px;
67 |   line-height: 50px;
68 |   font-size: 40px;
69 |   background: #ebebeb;
70 | }
71 | .user{
72 |   width: 100px;
73 |   height: 100px;
74 | }
75 | .play{
76 |   width: 50px;
77 |   height: 50px;
78 | 
79 | }
80 | .item{
81 |   display: flex;
82 |   align-items: center;
83 |   justify-content: space-between;
84 |   padding: 0 20px;
85 |   margin: 20px 0;
86 |   border-bottom: 1px solid #ebebeb;
87 | }
88 | </style>


--------------------------------------------------------------------------------
/src/views/Music/MusicMore.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="nav"><img @click="handleBack" src="../../assets/images/fan.png" alt=""><span>{{title}}</span><span></span></div>
 4 |     <div class="content">
 5 |       <Item v-for="item of musics" :key="item.id" :data="item" />
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   data() {
13 |     return {
14 |       musics: [],
15 |       title:[]
16 |     };
17 |   },
18 |   mounted() {
19 |     var subTitle = this.$route.query.subTitle;
20 |     this.title = this.$route.query.title;
21 |     this.axios.get(`http://musicapi.leanapp.cn/${subTitle}`).then(res => {
22 |       this.musics = res.data.playlists;
23 |     });
24 |   },
25 |   methods:{
26 |       handleBack(){
27 |           this.$router.back()
28 |       }
29 |   }
30 | };
31 | </script>
32 | 
33 | <style  scoped>
34 | .content {
35 |   display: flex;
36 |   justify-content: space-evenly;
37 |   flex-wrap: wrap;
38 | }
39 | .nav{
40 |     display: flex;
41 |     justify-content: space-between;
42 |     height: 50px;
43 |     line-height: 50px;
44 |     font-size: 30px;
45 | }
46 | .nav img{
47 |     width: 40px;
48 |     height: 40px;
49 | }
50 | </style>


--------------------------------------------------------------------------------
/src/views/Music/MusicPlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |      <div class="nav">
 4 |       <img @click="handleBack" src="../../assets/images/fan.png" alt />
 5 |       <span></span>
 6 |       <span></span>
 7 |     </div>
 8 |     <audio :src="url" controls></audio>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   data() {
15 |     return {
16 |       url:''
17 |     }
18 |   },
19 |   mounted(){
20 |     var id = this.$route.params.id
21 |     this.url=`https://music.163.com/song/media/outer/url?id=${id}`
22 |   },
23 |   methods:{
24 |     handleBack() {
25 |       this.$router.back();
26 |     },
27 |   }
28 | }
29 | </script>
30 | 
31 | <style scoped>
32 | .nav {
33 |   display: flex;
34 |   justify-content: space-between;
35 |   height: 50px;
36 |   line-height: 50px;
37 |   font-size: 30px;
38 | }
39 | .nav img {
40 |   width: 40px;
41 |   height: 40px;
42 | }
43 | </style>


--------------------------------------------------------------------------------
/src/views/Music/components/Itemmusic.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="content">
 4 |       <p>{{index+1 | number()}}</p>
 5 |       <img class="user" :src="data.al.picUrl" alt />
 6 |       <div class="name">
 7 |         <p>{{data.name |format()}}</p>
 8 |         <p>by:{{data.ar[0].name | format()}}</p>
 9 |       </div>
10 |       <p class="time">{{data.dt | time()}}</p>
11 |       <img
12 |         class="play"
13 |         :src="isPlay?require('@/assets/images/pause.png'):require('@/assets/images/play.png')"
14 |         @click="handlePlay"
15 |         alt
16 |       />
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: "Itemmusic",
24 |   data() {
25 |     return {
26 |       isPlay: true
27 |     };
28 |   },
29 |   props: {
30 |     data: {
31 |       type: Object,
32 |       required: true
33 |     },
34 |     index: {
35 |       type: Number,
36 |       required: true
37 |     }
38 |   },
39 |   methods: {
40 |     handlePlay() {
41 |       this.isPlay = !this.isPlay
42 |     }
43 |   }
44 | };
45 | </script>
46 | 
47 | <style  scoped>
48 | .user {
49 |   width: 80px;
50 |   height: 80px;
51 | }
52 | .play {
53 |   width: 50px;
54 |   height: 50px;
55 |   position: absolute;
56 |   right: 20px;
57 | }
58 | .content {
59 |   display: flex;
60 |   align-items: center;
61 |   border-bottom: 1px solid #ebebeb;
62 |   padding: 20px 0;
63 |   position: relative;
64 |   font-size: 24px;
65 | }
66 | .time {
67 |   position: absolute;
68 |   right: 100px;
69 | }
70 | </style>
71 | 
72 | 


--------------------------------------------------------------------------------
/src/views/My/My.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box">
 3 |     my
 4 |     <el-amap class="map" vid="amapDemo" :zoom="zoom" :center="center">
 5 |       <el-amap-marker
 6 |         v-for="(marker, index) in markers"
 7 |         :key="marker.id"
 8 |         :position="marker.position"
 9 |         :events="marker.events"
10 |         :visible="marker.visible"
11 |         :draggable="marker.draggable"
12 |         :vid="index"
13 |       ></el-amap-marker>
14 |     </el-amap>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   data() {
21 |     return {
22 |       zoom: 15,
23 |       center: [114.503827, 30.552012],
24 |       markers: [
25 |         {
26 |           position: [121.5273285, 31.21515044],
27 |           events: {
28 |             click: () => {
29 |               alert("click marker");
30 |             },
31 |             dragend: e => {
32 |               console.log("---event---: dragend");
33 |               this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
34 |             }
35 |           },
36 |           visible: true,
37 |           draggable: false,
38 |           template: "<span>1</span>"
39 |         }
40 |       ]
41 |     };
42 |   }
43 | };
44 | </script>
45 | 
46 | <style scoped>
47 | .box {
48 |   margin: 0 auto;
49 | }
50 | .map {
51 |   width: 500px;
52 |   height: 500px;
53 | }
54 | </style>


--------------------------------------------------------------------------------
/src/views/Read/Read.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <van-swipe :autoplay="3000" indicator-color="white">
 4 |       <van-swipe-item>
 5 |         <img class="bg" src="https://i.loli.net/2019/10/21/8Qrtav6KsE7XGjM.png" alt />
 6 |       </van-swipe-item>
 7 |       <van-swipe-item>
 8 |         <img class="bg" src="https://i.loli.net/2019/10/21/4bGdIeEUqmZhKAV.png" alt />
 9 |       </van-swipe-item>
10 |       <van-swipe-item>
11 |         <img class="bg" src="https://i.loli.net/2019/10/21/arO4bo193jphTel.png" alt />
12 |       </van-swipe-item>
13 |     </van-swipe>
14 |     <div class="content" v-for="item of data" :key="item.id" @click="handleClick(item)">
15 |       <div class="user"> 
16 |   
17 |         <img :src="item.avatar" alt="">
18 |         <p>{{item.author}}</p>
19 |       </div>
20 |             <p>{{item.title}}</p>
21 |       <img class="poster" :src="item.imgSrc" alt="">
22 |       <p>{{item.content}}</p>
23 |       <div class="comment">
24 |         <span><img src="../../assets/images/icon/chat1.png" alt="">{{item.collection}}</span>
25 |         <span><img src="../../assets/images/icon/view.png" alt="">{{item.reading}}</span>
26 |       </div>
27 |     </div>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   data() {
34 |     return {
35 |       data:[]
36 |     }
37 |   },
38 |   mounted() {
39 |     var url = "http://yapi.demo.qunar.com/mock/34622/local";
40 |     this.axios.get(url).then(res => {
41 |       this.data = res.data
42 |     });
43 |   },
44 |   methods:{
45 |     handleClick(item){
46 |       this.$router.push({name:'ReadDetail',params:{item}})
47 |     }
48 |   }
49 | };
50 | </script>
51 | 
52 | <style scoped>
53 | .container{
54 |   background: #ebebeb;
55 | }
56 | .van-swipe{
57 |   margin-bottom: 20px;
58 | }
59 | .bg {
60 |   width: 10rem;
61 |   height: 400px;
62 | }
63 | .content{
64 |   background: #fff;
65 |   padding: 20px;
66 |   margin: 10px 0;
67 | }
68 | .user{
69 |   display: flex;
70 |   align-items: center;
71 | }
72 | .user img{
73 |   border-radius: 50%;
74 |   width: 50px;
75 |   height: 50px;
76 |   margin-right: 20px;
77 | }
78 | .poster{
79 |   width: 100%;
80 |   height: 300px;
81 |   margin: 10px 0;
82 | }
83 | </style>


--------------------------------------------------------------------------------
/src/views/Read/ReadDetail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="nav">
  4 |       <img class="bg" @click="handleBack" src="../../assets/images/fan.png" alt />
  5 |       <span></span>
  6 |       <span></span>
  7 |     </div>
  8 |     <img :src="data.imgSrc" alt />
  9 |     <div class="content">
 10 |       <div class="user">
 11 |         <img :src="data.avatar" alt />
 12 |         <p>{{data.author}}</p>
 13 |         <p>发表于 {{data.dateTime}}</p>
 14 |       </div>
 15 |       <h1 class="title">{{data.title}}</h1>
 16 |       <div class="share">
 17 |           <hr>
 18 |           <img @click="handleShou" class="shou"  :src="isshou?require('../../assets/images/icon/collection-anti.png'):require('../../assets/images/icon/collection.png')" alt="">
 19 |           <img @click="handleFen" class="fen" :src="isfen?require('../../assets/images/icon/share-anti.png'):require('../../assets/images/icon/share.png')" alt="">
 20 |       </div>
 21 |       <p>{{data.detail}}</p>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | export default {
 28 |   data() {
 29 |     return {
 30 |       data: [],
 31 |       isshou:true,
 32 |       isfen:true
 33 |     };
 34 |   },
 35 |   mounted() {
 36 |     var item = this.$route.params.item;
 37 |     this.data = item;
 38 |     this.isshou = localStorage.getItem("ishouw");
 39 |   },
 40 |   methods: {
 41 |     handleBack() {
 42 |       this.$router.back();
 43 |     },
 44 |     handleShou(){
 45 |         this.isshou = !this.isshou
 46 |         localStorage.setItem("isshou",this.isshou)
 47 |     },
 48 |     handleFen(){
 49 |         this.isfen = !this.isfen
 50 |     }
 51 |   }
 52 | };
 53 | </script>
 54 | 
 55 | <style scoped>
 56 | .nav {
 57 |   display: flex;
 58 |   justify-content: space-between;
 59 |   height: 50px;
 60 |   line-height: 50px;
 61 |   font-size: 30px;
 62 | }
 63 | .nav img {
 64 |   width: 40px;
 65 |   height: 40px;
 66 | }
 67 | .bg {
 68 |   width: 100%;
 69 |   height: 400px;
 70 | }
 71 | .user {
 72 |   display: flex;
 73 |   align-items: center;
 74 | }
 75 | .user img {
 76 |   border-radius: 50%;
 77 |   width: 50px;
 78 |   height: 50px;
 79 |   margin-right: 20px;
 80 | }
 81 | .title {
 82 |   font-size: 30px;
 83 |   font-weight: bold;
 84 | }
 85 | .content {
 86 |   padding: 20px;
 87 | }
 88 | .share{
 89 |     position: relative;
 90 |     margin: 60px 0;
 91 | }
 92 | .shou,.fen{
 93 |     position: absolute;
 94 |     top: -50px
 95 | }
 96 | .shou{
 97 |     right: 130px;
 98 | }
 99 | .fen{
100 |     right: 0px;
101 | }
102 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const mockIndexData=require("./data/local");
 2 | module.exports={
 3 |     devServer:{
 4 |         port:8080,
 5 |         
 6 |         before(app){
 7 |             app.get("/local",(req,res)=>{
 8 |                 res.json(mockIndexData);
 9 |             })
10 |         }
11 |     }
12 | }


--------------------------------------------------------------------------------