Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
代码敲不队
YoubiliProject
提交
7061f5ac
Y
YoubiliProject
项目概览
代码敲不队
/
YoubiliProject
通知
7
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Y
YoubiliProject
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
7061f5ac
编写于
6月 12, 2023
作者:
喷火的神灵
🎱
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
2023年6月10日18:01:19
上级
2ac385be
变更
40
隐藏空白更改
内联
并排
Showing
40 changed file
with
520 addition
and
1916 deletion
+520
-1916
YouBili_front-test/.eslintrc.js
YouBili_front-test/.eslintrc.js
+0
-18
YouBili_front-test/README.md
YouBili_front-test/README.md
+0
-24
YouBili_front-test/public/favicon.ico
YouBili_front-test/public/favicon.ico
+0
-0
YouBili_front-test/public/index.html
YouBili_front-test/public/index.html
+0
-17
YouBili_front-test/src/App.vue
YouBili_front-test/src/App.vue
+0
-37
YouBili_front-test/src/assets/logo.png
YouBili_front-test/src/assets/logo.png
+0
-0
YouBili_front-test/src/components/Handder.vue
YouBili_front-test/src/components/Handder.vue
+0
-415
YouBili_front-test/src/components/login.vue
YouBili_front-test/src/components/login.vue
+0
-294
YouBili_front-test/src/components/sidebar.vue
YouBili_front-test/src/components/sidebar.vue
+0
-94
YouBili_front-test/src/main.js
YouBili_front-test/src/main.js
+0
-25
YouBili_front-test/src/router/index.js
YouBili_front-test/src/router/index.js
+0
-146
YouBili_front-test/src/store/index.js
YouBili_front-test/src/store/index.js
+0
-17
YouBili_front-test/src/views/admin/adminIndex.vue
YouBili_front-test/src/views/admin/adminIndex.vue
+0
-34
YouBili_front-test/src/views/admin/adminLogin.vue
YouBili_front-test/src/views/admin/adminLogin.vue
+0
-23
YouBili_front-test/src/views/contribute/contribute.vue
YouBili_front-test/src/views/contribute/contribute.vue
+0
-21
YouBili_front-test/src/views/contribute/contributeManage.vue
YouBili_front-test/src/views/contribute/contributeManage.vue
+0
-21
YouBili_front-test/src/views/pay/commodity.vue
YouBili_front-test/src/views/pay/commodity.vue
+0
-23
YouBili_front-test/src/views/pay/pay.vue
YouBili_front-test/src/views/pay/pay.vue
+0
-21
YouBili_front-test/src/views/personal/collection.vue
YouBili_front-test/src/views/personal/collection.vue
+0
-21
YouBili_front-test/src/views/personal/dynamic.vue
YouBili_front-test/src/views/personal/dynamic.vue
+0
-21
YouBili_front-test/src/views/personal/fans.vue
YouBili_front-test/src/views/personal/fans.vue
+0
-21
YouBili_front-test/src/views/personal/follow.vue
YouBili_front-test/src/views/personal/follow.vue
+0
-21
YouBili_front-test/src/views/personal/history.vue
YouBili_front-test/src/views/personal/history.vue
+0
-21
YouBili_front-test/src/views/personal/notify.vue
YouBili_front-test/src/views/personal/notify.vue
+0
-21
YouBili_front-test/src/views/personal/otherSpace.vue
YouBili_front-test/src/views/personal/otherSpace.vue
+0
-21
YouBili_front-test/src/views/personal/personalCenter.vue
YouBili_front-test/src/views/personal/personalCenter.vue
+0
-23
YouBili_front-test/src/views/personal/report.vue
YouBili_front-test/src/views/personal/report.vue
+0
-21
YouBili_front-test/src/views/show/IndexView.vue
YouBili_front-test/src/views/show/IndexView.vue
+0
-189
YouBili_front-test/src/views/show/Search.vue
YouBili_front-test/src/views/show/Search.vue
+0
-21
YouBili_front-test/src/views/show/classification.vue
YouBili_front-test/src/views/show/classification.vue
+0
-21
YouBili_front-test/src/views/show/showHot.vue
YouBili_front-test/src/views/show/showHot.vue
+0
-21
YouBili_front-test/src/views/user/login.vue
YouBili_front-test/src/views/user/login.vue
+0
-22
YouBili_front-test/src/views/user/reg.vue
YouBili_front-test/src/views/user/reg.vue
+0
-21
YouBili_front-test/src/views/video/videoIndex.vue
YouBili_front-test/src/views/video/videoIndex.vue
+0
-27
YouBili_front/src/views/contribute/contribute.vue
YouBili_front/src/views/contribute/contribute.vue
+172
-29
YouBili_front/src/views/contribute/contributeManage.vue
YouBili_front/src/views/contribute/contributeManage.vue
+129
-29
YouBili_front/src/views/personal/history.vue
YouBili_front/src/views/personal/history.vue
+4
-2
YouBili_front/src/views/personal/notify.vue
YouBili_front/src/views/personal/notify.vue
+4
-2
YouBili_front/src/views/show/showHot.vue
YouBili_front/src/views/show/showHot.vue
+4
-2
YouBili_front/src/views/video/videoIndex.vue
YouBili_front/src/views/video/videoIndex.vue
+207
-109
未找到文件。
YouBili_front-test/.eslintrc.js
已删除
100644 → 0
浏览文件 @
2ac385be
module
.
exports
=
{
root
:
true
,
env
:
{
node
:
true
},
'
extends
'
:
[
'
plugin:vue/essential
'
,
'
eslint:recommended
'
],
parserOptions
:
{
parser
:
'
@babel/eslint-parser
'
},
rules
:
{
'
no-console
'
:
process
.
env
.
NODE_ENV
===
'
production
'
?
'
warn
'
:
'
off
'
,
'
no-debugger
'
:
process
.
env
.
NODE_ENV
===
'
production
'
?
'
warn
'
:
'
off
'
,
"
vue/multi-word-component-names
"
:
"
off
"
,
}
}
YouBili_front-test/README.md
已删除
100644 → 0
浏览文件 @
2ac385be
# group
## 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/
)
.
YouBili_front-test/public/favicon.ico
已删除
100644 → 0
浏览文件 @
2ac385be
4.2 KB
YouBili_front-test/public/index.html
已删除
100644 → 0
浏览文件 @
2ac385be
<!DOCTYPE html>
<html
lang=
""
>
<head>
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<title><
%=
htmlWebpackPlugin.options.title
%
></title>
</head>
<body>
<noscript>
<strong>
We're sorry but
<
%=
htmlWebpackPlugin.options.title
%
>
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>
YouBili_front-test/src/App.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<
template
>
<div
id=
"app"
>
<!--
<handder></handder>
-->
<!--
<div
id=
"content"
>
-->
<!--
<sidebar-vue></sidebar-vue>
-->
<!--
<div
class=
"i_w"
>
-->
<router-view/>
<!--
</div>
-->
<!-- -->
<!--
</div>
-->
</div>
</
template
>
<
script
>
export
default
{
}
</
script
>
<
style
>
*
{
padding
:
0
;
margin
:
0
;
text-decoration
:
none
;
border
:
0
;
}
#content
{
display
:
flex
;
justify-content
:
flex-start
;
}
.i_w
{
margin-left
:
250px
;
margin-top
:
60px
;
width
:
calc
(
100%-250px
);
/* margin: 60px auto; */
}
</
style
>
YouBili_front-test/src/assets/logo.png
已删除
100644 → 0
浏览文件 @
2ac385be
6.7 KB
YouBili_front-test/src/components/Handder.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--头部导航栏-->
<
template
>
<div
id=
"box"
>
<div
id=
"left"
>
<!--
<div>
<i
class=
"el-icon-s-fold"
></i>
</div>
-->
<div>
<el-image
:src=
"src"
></el-image>
</div>
</div>
<div>
<el-autocomplete
class=
"inline-input"
v-model=
"state1"
:fetch-suggestions=
"querySearch"
placeholder=
"请输入内容"
@
select=
"handleSelect"
>
<i
class=
"el-icon-search el-input__icon"
slot=
"suffix"
>
</i>
</el-autocomplete>
</div>
<div
id=
"right"
>
<div
class=
"popover"
v-if=
"!isLogin"
>
<!-- 头像 -->
<el-popover
placement=
"bottom"
title=
""
width=
"300"
trigger=
"hover"
content=
""
>
<el-avatar
slot=
"reference"
:size=
"40"
:src=
"userImg"
></el-avatar>
<div>
<h4>
登录以后你可以:
</h4>
<el-row
:gutter=
"30"
>
<el-col
:span=
"11"
>
<p
class=
"p-m"
><i
class=
"el-icon-monitor"
></i>
免费看高清视频
</p>
</el-col>
<el-col
:span=
"13"
>
<p
class=
"p-m"
><i
class=
"el-icon-time"
></i>
多端同步播放记录
</p>
</el-col>
</el-row>
<el-row
:gutter=
"30"
>
<el-col
:span=
"11"
>
<p
class=
"p-m"
><i
class=
"el-icon-chat-dot-square"
></i>
发表弹幕/评论
</p>
</el-col>
<el-col
:span=
"13"
>
<p
class=
"p-m"
><i
class=
"el-icon-video-play"
></i>
热门番剧影视看不停
</p>
</el-col>
</el-row>
<el-button
style=
"width:100%"
type=
"primary"
@
click=
"dialogVisible=true"
>
立即登录
</el-button>
</div>
</el-popover>
</div>
<div
class=
"popover"
v-else
>
<el-popover
placement=
"bottom"
title=
""
width=
"300"
trigger=
"hover"
content=
""
>
<el-avatar
class=
"avatar"
slot=
"reference"
:size=
"40"
:src=
"userImg1"
></el-avatar>
<div
class=
"myCenter"
>
<h3>
用户昵称
</h3>
<div
class=
"nick-sty"
>
<div>
<p>
144
</p>
<span>
关注
</span>
</div>
<div>
<p>
12
</p>
<span>
粉丝
</span>
</div>
<div>
<p>
123
</p>
<span>
动态
</span>
</div>
</div>
<p><i
style=
"margin-right: 20px;font-size: 20px;"
class=
"el-icon-user"
></i>
个人中心
</p>
<!--
<el-divider></el-divider>
-->
<p><i
style=
"margin-right: 20px;font-size: 20px;"
class=
"el-icon-switch-button"
></i>
退出登录
</p>
</div>
</el-popover>
</div>
<el-popover
placement=
"bottom"
title=
""
width=
"350"
trigger=
"hover"
content=
""
>
<div
slot=
"reference"
ref=
"collect"
@
mouseover=
"handleMouseOver"
class=
"sc_cls"
>
<i
class=
"el-icon-star-off"
></i>
<p>
收藏
</p>
</div>
<div
class=
"big-box"
>
<div
v-for=
"(v,i) of scList"
:key=
"i"
class=
"sc-box"
>
<!-- 图片 -->
<div>
<img
width=
"120px"
height=
"100%"
:src=
"v.img"
alt=
""
>
</div>
<div
class=
"sc-content"
>
<div>
<h4>
{{
v
.
title
}}
</h4>
</div>
<div>
<p>
{{
v
.
name
}}
</p>
</div>
</div>
</div>
</div>
</el-popover>
<el-popover
placement=
"bottom"
title=
""
width=
"350"
trigger=
"hover"
content=
""
>
<div
slot=
"reference"
class=
"sc_cls"
>
<i
class=
"el-icon-time"
></i>
<p>
历史
</p>
</div>
<div
class=
"big-box"
>
<div
v-for=
"(v,i) of lsList"
:key=
"i"
class=
"sc-box"
>
<!-- 图片 -->
<div>
<img
width=
"120px"
height=
"100%"
:src=
"v.img"
alt=
""
>
</div>
<div
class=
"sc-content"
>
<div>
<h4>
{{
v
.
title
}}
</h4>
</div>
<div>
<p>
{{
v
.
time
}}
</p>
</div>
<div>
<p>
{{
v
.
name
}}
</p>
</div>
</div>
</div>
</div>
</el-popover>
<div>
<el-button
type=
"primary"
icon=
"el-icon-upload"
>
投稿
</el-button>
</div>
</div>
<!-- 登录的弹窗 -->
<login
:isTrue=
"dialogVisible"
@
close=
"dialogVisible=false"
></login>
</div>
</
template
>
<
script
>
import
login
from
"
./login
"
export
default
{
name
:
"
handder
"
,
components
:
{
login
},
data
()
{
return
{
isLogin
:
false
,
dialogVisible
:
false
,
// 登录注册弹窗
src
:
null
,
// 图片路径
restaurants
:
[],
// 输入框模糊查询出的数据 需要后台传输
state1
:
''
,
// 用户选中的数据
userImg
:
"
https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png
"
,
userImg1
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
scList
:
[
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
title
:
"
蜘蛛侠
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
title
:
"
蝙蝠侠
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
title
:
"
钢铁侠
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
title
:
"
闪电侠
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
title
:
"
绿箭侠
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
title
:
"
蜘蛛侠
"
,
name
:
"
彼得帕克
"
},
],
lsList
:
[
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415062311645.png
"
,
title
:
"
蜘蛛侠
"
,
time
:
"
2023-02-10
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20200120/2020012017544296758.jpg
"
,
title
:
"
蝙蝠侠
"
,
time
:
"
2023-02-10
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
title
:
"
钢铁侠
"
,
time
:
"
2023-02-10
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415075614503.png
"
,
title
:
"
闪电侠
"
,
time
:
"
2023-02-10
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20200509/2020050914430985995.jpg
"
,
title
:
"
绿箭侠
"
,
time
:
"
2023-02-10
"
,
name
:
"
彼得帕克
"
},
{
img
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415040910416.png
"
,
title
:
"
蜘蛛侠
"
,
time
:
"
2023-02-10
"
,
name
:
"
彼得帕克
"
},
],
}
},
methods
:
{
// 鼠标移动到收藏的时候 发生的变化
handleMouseOver
()
{
let
sLeft
=
this
.
$refs
.
collect
.
clientLeft
;
let
sTop
=
this
.
$refs
.
collect
.
clientTop
;
console
.
log
(
sLeft
,
sTop
,
this
.
$refs
.
collect
);
},
querySearch
(
queryString
,
cb
)
{
var
restaurants
=
this
.
restaurants
;
var
results
=
queryString
?
restaurants
.
filter
(
this
.
createFilter
(
queryString
))
:
restaurants
;
// 调用 callback 返回建议列表的数据
cb
(
results
);
},
// 用户输入内容筛选
createFilter
(
queryString
)
{
return
(
restaurant
)
=>
{
return
(
restaurant
.
value
.
toLowerCase
().
indexOf
(
queryString
.
toLowerCase
())
===
0
);
};
},
// 输入框方法
handleSelect
(
item
)
{
console
.
log
(
item
);
},
// 需要后台输入的
loadAll
()
{
return
[
{
value
:
"
选择1
"
,
index
:
1
},
{
value
:
"
选择2
"
,
index
:
2
},
{
value
:
"
选择3
"
,
index
:
3
},
{
value
:
"
选择4
"
,
index
:
4
},
{
value
:
"
选择5
"
,
index
:
5
}
]
},
},
created
()
{
},
mounted
()
{
this
.
restaurants
=
this
.
loadAll
();
}
}
</
script
>
<
style
scoped
>
i
{
cursor
:
pointer
;
}
#box
{
position
:
fixed
;
top
:
0
;
left
:
0
;
background
:
#fff
;
height
:
60px
;
width
:
100%
;
min-width
:
1200px
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
z-index
:
99999
;
}
#left
{
width
:
200px
;
display
:
flex
;
justify-content
:
space-around
;
align-items
:
center
;
}
#right
{
width
:
300px
;
display
:
flex
;
justify-content
:
space-around
;
align-items
:
center
;
}
.sc_cls
{
cursor
:
pointer
;
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
justify-content
:
space-around
;
position
:
relative
;
}
.sc_cls
i
{
transform
:
rotate
(
0deg
);
transition
:
all
.3s
ease
;
}
.sc_cls
:hover
i
{
/* transform: rotate(360deg); */
transform
:
translateY
(
-4px
);
}
.sc_cls
p
{
font-size
:
12px
;
}
.el-autocomplete
{
width
:
580px
;
}
.popover
{
cursor
:
pointer
;
}
.p-m
{
margin
:
10px
0
;
cursor
:
pointer
;
font-weight
:
bold
;
}
.p-m
i
{
font-size
:
15px
;
}
.big-box
{
overflow-y
:
auto
;
height
:
400px
;
}
.sc-box
{
padding
:
10px
0
;
width
:
100%
;
display
:
flex
;
justify-content
:
flex-start
;
align-items
:
center
;
transition
:
all
.3s
;
cursor
:
pointer
;
}
.sc-box
:hover
{
background
:
#f1f2f3
;
}
.sc-box
>
div
{
height
:
60px
;
}
.sc-content
{
height
:
100%
;
margin-left
:
10px
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
space-between
;
align-items
:
flex-start
;
}
.sc-content
p
{
font-size
:
13px
;
}
.avatar
{
transition
:
all
.3s
;
}
.popover
:hover
.avatar
{
/* transform: scale(2) translateX(-25%); */
}
.myCenter
{
text-align
:
center
;
}
.myCenter
>
p
{
cursor
:
pointer
;
text-align
:
left
;
border-radius
:
5px
;
line-height
:
35px
;
padding-left
:
20px
;
}
.myCenter
>
p
:hover
{
background
:
#E3E5E7
;
}
.nick-sty
{
padding
:
20px
;
margin-top
:
20px
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
}
.nick-sty
p
{
font-size
:
16px
;
font-weight
:
bold
;
}
.nick-sty
span
{
font-size
:
12px
;
}
</
style
>
\ No newline at end of file
YouBili_front-test/src/components/login.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<
template
>
<!-- 登录的弹窗 -->
<el-dialog
title=
""
width=
"600px"
:visible=
"isTrue"
@
close=
"$emit('close')"
>
<el-tabs
style=
"margin:0 auto"
type=
"border-card"
>
<el-tab-pane
style=
"height: 450px"
label=
"登录"
>
<el-form
:model=
"login"
status-icon
:rules=
"loginRules"
ref=
"login"
label-width=
"100px"
class=
"demo-ruleForm"
>
<el-form-item
label=
"用户名"
prop=
"username"
>
<el-input
v-model=
"login.username"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"密码"
prop=
"password"
>
<el-input
type=
"password"
v-model=
"login.password"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
@
click=
"loginForm('login')"
>
登录
</el-button>
<el-button
@
click=
"resForm('login')"
>
重置
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane
style=
"height: 450px"
label=
"注册"
>
<el-form
:model=
"ruleForm"
status-icon
:rules=
"rules"
ref=
"ruleForm"
label-width=
"100px"
class=
"demo-ruleForm"
>
<el-form-item
label=
"用户名"
prop=
"username"
>
<el-input
v-model=
"ruleForm.username"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"密码"
prop=
"password"
>
<el-input
type=
"password"
v-model=
"ruleForm.password"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"确认密码"
prop=
"checkPassword"
>
<el-input
type=
"password"
v-model=
"ruleForm.checkPassword"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"昵称"
prop=
"nickname"
>
<el-input
type=
"text"
v-model=
"ruleForm.nickname"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"邮箱"
prop=
"email"
>
<el-input
type=
"text"
v-model=
"ruleForm.email"
autocomplete=
"off"
></el-input>
</el-form-item>
<!--获取验证码-->
<el-form-item
prop=
"code"
>
<div
class=
"bind_code margin_top"
>
<el-input
class=
"bind_code_input code"
v-model=
"ruleForm.code"
type=
"text"
placeholder=
"请输入验证码"
/>
<el-button
@
click.native.prevent=
"bindforgetSendCode('ruleForm')"
class=
"bind_code_gain"
:disabled=
"disabled"
>
{{
btnText
}}
</el-button>
<!--
<img-->
<!-- class="login-icon"-->
<!-- src=""-->
<!-- alt=""-->
<!-- />-->
</div>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
@
click=
"submitForm('ruleForm')"
>
提交
</el-button>
<el-button
@
click=
"resetForm('ruleForm')"
>
重置
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-dialog>
</
template
>
<
script
>
export
default
{
name
:
"
login
"
,
props
:
{
isTrue
:
Boolean
,
},
data
()
{
var
validatePassword
=
(
rule
,
value
,
callback
)
=>
{
if
(
value
===
''
)
{
callback
(
new
Error
(
'
请输入密码
'
));
}
else
{
if
(
this
.
ruleForm
.
checkPassword
!==
''
)
{
this
.
$refs
.
ruleForm
.
validateField
(
'
checkPassword
'
);
}
callback
();
}
};
var
validatePassword2
=
(
rule
,
value
,
callback
)
=>
{
if
(
value
===
''
)
{
callback
(
new
Error
(
'
请再次输入密码
'
));
}
else
if
(
value
!==
this
.
ruleForm
.
password
)
{
callback
(
new
Error
(
'
两次输入密码不一致!
'
));
}
else
{
callback
();
}
};
return
{
disabled
:
false
,
btnText
:
"
发送验证码
"
,
dialogVisible
:
true
,
login
:
{
username
:
''
,
// 登录要输入的用户名
password
:
''
// 登录要输入的密码
},
ruleForm
:
{
username
:
''
,
// 用户名
password
:
''
,
// 密码
checkPassword
:
''
,
// 再次输入密码
nickname
:
''
,
// 昵称
code
:
''
,
// 验证码
email
:
''
,
// 邮箱
},
sessionId
:
""
,
// 验证规则
loginRules
:
{
username
:
[
{
required
:
true
,
message
:
"
请输入用户名
"
,
trigger
:
'
blur
'
}
],
password
:
[
{
required
:
true
,
message
:
"
请输入密码
"
,
trigger
:
'
blur
'
}
]
},
rules
:
{
username
:
[
{
required
:
true
,
message
:
"
请输入用户名
"
,
trigger
:
'
blur
'
}
],
password
:
[
{
validator
:
validatePassword
,
trigger
:
'
blur
'
},
{
required
:
true
}
],
checkPassword
:
[
{
validator
:
validatePassword2
,
trigger
:
'
blur
'
},
{
required
:
true
}
],
code
:
[
{
required
:
true
,
message
:
"
请输入短信验证码
"
,
trigger
:
"
blur
"
},
],
email
:
[
{
required
:
true
,
message
:
"
请输入邮箱
"
,
trigger
:
"
blur
"
},
],
nickname
:
[
{
required
:
true
,
message
:
"
请输入昵称
"
,
trigger
:
"
blur
"
},
],
},
}
},
methods
:
{
// 提交按钮
//forName 当用户输入为空时,会提示用户名和密码不能为空
submitForm
(
formName
)
{
this
.
$refs
[
formName
].
validate
((
valid
)
=>
{
if
(
valid
)
{
// alert('submit!');
this
.
axios
.
post
(
"
/api/auth/register
"
,
{...
this
.
ruleForm
,
sessionId
:
this
.
sessionId
},
{
headers
:
{
'
Content-Type
'
:
'
application/x-www-form-urlencoded
'
}}).
then
(
res
=>
{
if
(
res
.
data
.
status
==
200
)
{
this
.
$message
.
success
(
res
.
data
.
message
)
this
.
$emit
(
'
close
'
);
}
})
}
else
{
console
.
log
(
'
error submit!!
'
);
return
false
;
}
});
},
// 重置按钮
resetForm
(
formName
)
{
this
.
$refs
[
formName
].
resetFields
();
},
// 提交按钮
loginForm
(
formName
)
{
this
.
$refs
[
formName
].
validate
((
valid
)
=>
{
if
(
valid
)
{
alert
(
'
login!
'
);
// 登录成功之后给弹窗隐藏
this
.
axios
.
post
(
"
/api/auth/login
"
,
this
.
login
,
{
headers
:
{
'
Content-Type
'
:
'
application/x-www-form-urlencoded
'
}}).
then
(
res
=>
{
if
(
res
.
data
.
status
==
200
)
{
this
.
$message
.
success
(
res
.
data
.
message
)
this
.
$emit
(
'
close
'
);
}
})
}
else
{
console
.
log
(
'
error login!!
'
);
return
false
;
}
});
},
// 重置按钮
resForm
(
formName
)
{
this
.
$refs
[
formName
].
resetFields
();
},
// 发送验证码
bindforgetSendCode
(
formName
)
{
//手机号 为空的话
this
.
$refs
[
formName
].
validateField
(
"
email
"
,(
valid
)
=>
{
if
(
!
valid
)
{
this
.
$message
(
"
已发送验证码,请查收
"
);
this
.
disabled
=
true
;
this
.
btnText
=
"
请稍候...
"
;
setTimeout
(()
=>
{
this
.
doLoop
(
60
);
},
500
);
this
.
axios
.
post
(
"
/api/auth/vaild-email
"
,{
email
:
this
.
ruleForm
.
email
},
{
headers
:
{
'
Content-Type
'
:
'
application/x-www-form-urlencoded
'
}}).
then
(
res
=>
{
if
(
res
.
data
.
status
==
200
)
{
// console.log(res.data.data);
this
.
sessionId
=
res
.
data
.
sessionId
;
console
.
log
(
this
.
sessionId
+
"
1111111111
"
)
this
.
$message
.
success
(
"
邮件已发送
"
)
}
})
}
else
{
return
false
;
}
});
},
// 手机验证码的倒计时
doLoop
:
function
(
seconds
)
{
seconds
=
seconds
?
seconds
:
60
;
this
.
btnText
=
seconds
+
"
s后获取
"
;
// this.code = code
let
countdown
=
setInterval
(()
=>
{
if
(
seconds
>
0
)
{
this
.
btnText
=
seconds
+
"
s后获取
"
;
--
seconds
;
}
else
{
this
.
btnText
=
"
获取验证码
"
;
this
.
disabled
=
false
;
clearInterval
(
countdown
);
}
},
1000
);
},
}
}
</
script
>
<
style
scoped
>
.bind_code
{
position
:
relative
;
}
.bind_code
.el-input__inner
{
width
:
328px
;
height
:
44px
;
background
:
#f7f7f7
;
border-radius
:
4px
;
border
:
1px
solid
#e4e4e4
;
outline
:
none
;
padding
:
0
100px
0
10px
;
}
.bind_code
.code
/
deep
/
.el-input__suffix
{
right
:
97px
;
}
.bind_code
.el-button
{
border
:
0
;
background
:
none
;
padding
:
0
;
border-radius
:
0
;
}
.bind_code
.pic
{
width
:
80px
;
height
:
25px
;
border-left
:
none
!important
;
}
.bind_code
.bind_code_gain
{
position
:
absolute
;
top
:
calc
(
50%
-
9px
);
right
:
10px
;
font-size
:
14px
;
font-family
:
MicrosoftYaHei
;
color
:
#20aee5
;
line-height
:
18px
;
cursor
:
pointer
;
padding-left
:
10px
;
border-left
:
1px
solid
#d8d8d8
;
}
.bind_code
.login-icon
{
width
:
16px
;
height
:
16px
;
position
:
absolute
;
top
:
14px
;
left
:
16px
;
}
</
style
>
\ No newline at end of file
YouBili_front-test/src/components/sidebar.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--侧边栏-->
<
template
>
<div>
<el-menu
id=
"sidebar"
class=
"el-menu-vertical-demo"
default-active=
"2"
style=
"height:90vh"
@
close=
"handleClose"
@
open=
"handleOpen"
>
<router-link
to=
"/"
>
<el-menu-item
index=
"1"
>
<i
class=
"el-icon-menu"
></i>
<span
slot=
"title"
>
首页
</span>
</el-menu-item>
</router-link>
<router-link
to=
"/showHot"
>
<el-menu-item
index=
"2"
>
<i
class=
"el-icon-document"
></i>
<span
slot=
"title"
>
热门
</span>
</el-menu-item>
</router-link>
<el-menu-item
index=
"3"
>
<i
class=
"el-icon-setting"
></i>
<span
slot=
"title"
>
动态
</span>
</el-menu-item>
<el-menu-item
index=
"4"
>
<i
class=
"el-icon-setting"
></i>
<span
slot=
"title"
>
通知
</span>
</el-menu-item>
<el-submenu
index=
"5"
>
<template
slot=
"title"
>
<i
class=
"el-icon-location"
></i>
<span>
分类
</span>
</
template
>
<el-menu-item-group>
<
template
slot=
"title"
>
分组一
</
template
>
<el-menu-item
index=
"5-1"
>
选项1
</el-menu-item>
<el-menu-item
index=
"5-2"
>
选项2
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group
title=
"分组2"
>
<el-menu-item
index=
"5-3"
>
选项3
</el-menu-item>
</el-menu-item-group>
<!-- <el-submenu index="5-4">
<template slot="title">选项4</template>
<el-menu-item index="5-4-1">选项1</el-menu-item>
</el-submenu> -->
</el-submenu>
</el-menu>
</div>
</template>
<
script
>
export
default
{
name
:
"
sidebar
"
,
data
()
{
return
{
handleOpen
(
key
,
keyPath
)
{
console
.
log
(
key
,
keyPath
);
},
handleClose
(
key
,
keyPath
)
{
console
.
log
(
key
,
keyPath
);
},
handleClick
(
tab
,
event
)
{
console
.
log
(
tab
,
event
);
}
}
},
created
()
{
console
.
log
(
this
.
$router
.
options
.
routes
)
}
}
</
script
>
<
style
scoped
>
*
{
padding
:
0
;
margin
:
0
;
}
#sidebar
{
position
:
fixed
;
top
:
60px
;
left
:
0
;
width
:
250px
;
}
</
style
>
\ No newline at end of file
YouBili_front-test/src/main.js
已删除
100644 → 0
浏览文件 @
2ac385be
import
Vue
from
'
vue
'
import
ElementUI
from
'
element-ui
'
;
import
'
element-ui/lib/theme-chalk/index.css
'
;
import
App
from
'
./App.vue
'
import
router
from
'
./router
'
import
store
from
'
./store
'
import
VueDPlayer
from
"
vue-dplayer
"
;
import
"
vue-dplayer/dist/vue-dplayer.css
"
;
import
axios
from
"
axios
"
;
// Vue.use(axios);
Vue
.
prototype
.
axios
=
axios
;
Vue
.
use
(
VueDPlayer
);
Vue
.
use
(
ElementUI
);
Vue
.
config
.
productionTip
=
false
axios
.
defaults
.
baseURL
=
'
http://192.168.43.35:8089
'
new
Vue
({
router
,
store
,
render
:
h
=>
h
(
App
)
}).
$mount
(
'
#app
'
)
YouBili_front-test/src/router/index.js
已删除
100644 → 0
浏览文件 @
2ac385be
import
Vue
from
'
vue
'
import
VueRouter
from
'
vue-router
'
Vue
.
use
(
VueRouter
)
const
routes
=
[
{
//首页
path
:
'
/
'
,
name
:
'
index
'
,
component
:
()
=>
import
(
'
../views/show/IndexView.vue
'
)
},
{
//管理员页面
path
:
'
/adminIndex
'
,
name
:
'
adminIndex
'
,
component
:
()
=>
import
(
'
../views/admin/adminIndex.vue
'
)
},
{
//管理员登录页面
path
:
'
/adminLogin
'
,
name
:
'
adminLogin
'
,
component
:()
=>
import
(
'
../views/admin/adminLogin.vue
'
)
},
{
//投稿界面
path
:
'
/contribute
'
,
name
:
'
contribute
'
,
component
:()
=>
import
(
'
../views/contribute/contribute.vue
'
)
},
{
//投稿管理界面
path
:
'
/contributeManage
'
,
name
:
'
contributeManage
'
,
component
:()
=>
import
(
'
../views/contribute/contributeManage.vue
'
)
},
{
//购买界面
path
:
'
/commodity
'
,
name
:
'
commodity
'
,
component
:()
=>
import
(
'
../views/pay/commodity.vue
'
)
},
{
//支付界面
path
:
'
/pay
'
,
name
:
'
pay
'
,
component
:()
=>
import
(
'
../views/pay/pay.vue
'
)
},
{
//收藏界面
path
:
'
/collection
'
,
name
:
'
collection
'
,
component
:()
=>
import
(
'
../views/personal/collection.vue
'
)
},
{
//动态界面
path
:
'
/dynamic
'
,
name
:
'
dynamic
'
,
component
:()
=>
import
(
'
../views/personal/dynamic.vue
'
)
},
{
//粉丝界面
path
:
'
/fans
'
,
name
:
'
fans
'
,
component
:()
=>
import
(
'
../views/personal/fans.vue
'
)
},
{
//关注者界面
path
:
'
/follow
'
,
name
:
'
follow
'
,
component
:()
=>
import
(
'
../views/personal/follow.vue
'
)
},
{
//历史
path
:
'
/history
'
,
name
:
'
history
'
,
component
:()
=>
import
(
'
../views/personal/history.vue
'
)
},
{
//通知
path
:
'
/notify
'
,
name
:
'
notify
'
,
component
:()
=>
import
(
'
../views/personal/notify.vue
'
)
},
{
//他人空间
path
:
'
/otherSpace
'
,
name
:
'
otherSpace
'
,
component
:()
=>
import
(
'
../views/personal/otherSpace.vue
'
)
},
{
//个人中心
path
:
'
/personalCenter
'
,
name
:
'
personalCenter
'
,
component
:()
=>
import
(
'
../views/personal/personalCenter.vue
'
)
},
{
//举报
path
:
'
/report
'
,
name
:
'
report
'
,
component
:()
=>
import
(
'
../views/personal/report.vue
'
)
},
{
//分类
path
:
'
/classification
'
,
name
:
'
classification
'
,
component
:()
=>
import
(
'
../views/show/classification.vue
'
)
},
{
//搜索页
path
:
'
/Search
'
,
name
:
'
Search
'
,
component
:()
=>
import
(
'
../views/show/Search.vue
'
)
},
{
//热门
path
:
'
/showHot
'
,
name
:
'
showHot
'
,
component
:()
=>
import
(
'
../views/show/showHot.vue
'
)
},
{
//登录
path
:
'
/login
'
,
name
:
'
login
'
,
component
:()
=>
import
(
'
../views/user/login.vue
'
)
},
{
//注册
path
:
'
/reg
'
,
name
:
'
reg
'
,
component
:()
=>
import
(
'
../views/user/reg.vue
'
)
},
{
//视频页面
path
:
'
/videoIndex
'
,
name
:
'
videoIndex
'
,
component
:()
=>
import
(
'
../views/video/videoIndex.vue
'
)
},
]
const
router
=
new
VueRouter
({
routes
})
export
default
router
YouBili_front-test/src/store/index.js
已删除
100644 → 0
浏览文件 @
2ac385be
import
Vue
from
'
vue
'
import
Vuex
from
'
vuex
'
Vue
.
use
(
Vuex
)
export
default
new
Vuex
.
Store
({
state
:
{
},
getters
:
{
},
mutations
:
{
},
actions
:
{
},
modules
:
{
}
})
YouBili_front-test/src/views/admin/adminIndex.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--管理员界面-->
<
template
>
<div>
<p
@
click=
"dialogVisible=true"
>
弹出登录框
</p>
<!-- 登录的弹窗 -->
<login
:isTrue=
"dialogVisible"
@
close=
"dialogVisible=false"
></login>
<h1>
<router-link
to=
"/"
>
跳转首页
</router-link>
</h1>
</div>
</
template
>
<
script
>
import
login
from
"
../../components/login
"
export
default
{
name
:
"
adminIndex
"
,
components
:
{
login
},
data
()
{
return
{
dialogVisible
:
false
}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/admin/adminLogin.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--管理员登录界面-->
<
template
>
<div>
<h1>
管理员登录界面
</h1>
</div>
</
template
>
<
script
>
export
default
{
name
:
"
adminLogin
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/contribute/contribute.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--投稿界面-->
<
template
>
<div></div>
</
template
>
<
script
>
export
default
{
name
:
"
contribute
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/contribute/contributeManage.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--投稿管理界面-->
<
template
>
<div></div>
</
template
>
<
script
>
export
default
{
name
:
"
contributeManage
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/pay/commodity.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--购买界面-->
<
template
>
<div>
购买界面
</div>
</
template
>
<
script
>
export
default
{
name
:
"
commodity
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/pay/pay.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--支付界面-->
<
template
>
<div>
支付界面
</div>
</
template
>
<
script
>
export
default
{
name
:
"
pay
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/collection.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--收藏-->
<
template
>
<div>
收藏
</div>
</
template
>
<
script
>
export
default
{
name
:
"
collection
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/dynamic.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--动态-->
<
template
>
<div>
动态
</div>
</
template
>
<
script
>
export
default
{
name
:
"
dynamic
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/fans.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--粉丝-->
<
template
>
<div>
粉丝
</div>
</
template
>
<
script
>
export
default
{
name
:
"
fans
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/follow.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--关注-->
<
template
>
<div>
关注
</div>
</
template
>
<
script
>
export
default
{
name
:
"
follow
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/history.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--历史-->
<
template
>
<div>
历史
</div>
</
template
>
<
script
>
export
default
{
name
:
"
history
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/notify.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--通知-->
<
template
>
<div>
通知
</div>
</
template
>
<
script
>
export
default
{
name
:
"
notify
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/otherSpace.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--他人空间-->
<
template
>
<div>
他人空间
</div>
</
template
>
<
script
>
export
default
{
name
:
"
otherSpace
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/personalCenter.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--个人中心-->
<
template
>
<div>
个人中心
</div>
</
template
>
<
script
>
export
default
{
name
:
"
personalCenter
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/personal/report.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--举报-->
<
template
>
<div>
举报
</div>
</
template
>
<
script
>
export
default
{
name
:
"
report
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/show/IndexView.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--主页-->
<
template
>
<div
id=
"idx"
>
<Handder></Handder>
<sidebarVue></sidebarVue>
<div
class=
"idxs"
>
<div>
<el-row
:gutter=
"20"
>
<el-col
:span=
"12"
>
<div>
<el-carousel
height=
"420px"
trigger=
"click"
>
<el-carousel-item
v-for=
"(item,idx) in lbList"
:key=
"idx"
>
<h3
class=
"small"
>
<img
:src=
"item.src"
alt=
""
height=
"420px"
width=
"100%"
>
</h3>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
<el-col
:span=
"12"
>
<el-row
:gutter=
"20"
>
<el-col
v-for=
"(v,i) of lbList2"
:key=
"i"
:span=
"12"
>
<router-link
to=
"/videoIndex"
>
<div
class=
"sp_box"
>
<img
:src=
"v.src"
alt=
""
width=
"100%"
>
<h4>
{{
v
.
title
}}
</h4>
<p>
{{
v
.
name
}}
</p>
</div>
</router-link>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<div>
<el-row
:gutter=
"20"
>
<router-link
to=
"/videoIndex"
>
<el-col
v-for=
"(v,i) of sum"
:key=
"i"
:span=
"8"
>
<div
class=
"sp_box"
>
视频页面
</div>
</el-col>
</router-link>
</el-row>
</div>
<el-backtop
:bottom=
"50"
:right=
"8"
:visibility-height=
"100"
></el-backtop>
</div>
</div>
</
template
>
<
script
>
import
Handder
from
"
@/components/Handder
"
;
import
sidebarVue
from
"
@/components/sidebar
"
;
export
default
{
name
:
"
index
"
,
components
:{
Handder
,
sidebarVue
},
data
()
{
return
{
sum
:
10
,
lbList
:
[
{
src
:
"
https://uploadstatic.mihoyo.com/contentweb/20200509/2020050914430985995.jpg
"
},
{
src
:
"
https://uploadstatic.mihoyo.com/contentweb/20200120/2020012017544296758.jpg
"
},
{
src
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415075614503.png
"
},
{
src
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415062311645.png
"
}
],
lbList2
:
[
{
src
:
"
https://uploadstatic.mihoyo.com/contentweb/20200509/2020050914430985995.jpg
"
,
title
:
"
战锤3全战:超凡 传奇-巴托-里昂尼斯战团-40T全天灾#1
"
,
name
:
"
擎天柱
"
},
{
src
:
"
https://uploadstatic.mihoyo.com/contentweb/20200120/2020012017544296758.jpg
"
,
title
:
"
汽车人
"
,
name
:
"
擎天柱
"
},
{
src
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415075614503.png
"
,
title
:
"
汽车人
"
,
name
:
"
擎天柱
"
},
{
src
:
"
https://uploadstatic.mihoyo.com/contentweb/20191114/2019111415062311645.png
"
,
title
:
"
汽车人
"
,
name
:
"
擎天柱
"
}
]
}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
>
*
{
padding
:
0
;
margin
:
0
;
border
:
0
;
}
#idx
{
margin
:
0
auto
;
}
@media
screen
and
(
min-width
:
1970px
){
.idxs
{
margin
:
0
auto
;
width
:
calc
(
100%
-
290px
);
max-width
:
1970px
;
}
}
@media
screen
and
(
max-width
:
1969px
){
.idxs
{
/*width: 1270px;*/
/*min-width: 1000px;*/
margin-top
:
60px
;
margin-left
:
270px
;
/*padding: 40px;*/
width
:
calc
(
100%
-
290px
);
max-width
:
1970px
;
}
}
.lunbo
{
width
:
500px
;
}
#el_box
{
margin-bottom
:
20px
;
}
.sp_box
{
height
:
200px
;
border-radius
:
5px
;
background
:
greenyellow
;
margin-bottom
:
20px
;
cursor
:
pointer
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
space-between
;
align-items
:
flex-start
;
}
.sp_box
img
{
border-radius
:
5px
;
}
.sp_box
p
{
font-size
:
13px
;
color
:
#555
;
font-weight
:
bold
;
}
.el-carousel
{
border-radius
:
5px
;
}
/* 轮播图的样式 可以注释 */
.el-carousel__item
h3
{
color
:
#475669
;
font-size
:
14px
;
opacity
:
0.75
;
line-height
:
150px
;
margin
:
0
;
}
.el-carousel__item
:nth-child
(
2
n
)
{
background-color
:
#99a9bf
;
}
.el-carousel__item
:nth-child
(
2
n
+
1
)
{
background-color
:
#d3dce6
;
}
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/show/Search.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--搜索页-->
<
template
>
<div>
搜索页
</div>
</
template
>
<
script
>
export
default
{
name
:
"
Search
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/show/classification.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--分类-->
<
template
>
<div>
分类
</div>
</
template
>
<
script
>
export
default
{
name
:
"
classification
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/show/showHot.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--热门-->
<
template
>
<div>
热门
</div>
</
template
>
<
script
>
export
default
{
name
:
"
showHot
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/user/login.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--登录-->
<
template
>
<div>
登录
</div>
</
template
>
<
script
>
export
default
{
name
:
"
login
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/user/reg.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<!--注册-->
<
template
>
<div>
注册
</div>
</
template
>
<
script
>
export
default
{
name
:
"
reg
"
,
data
()
{
return
{}
},
methods
:
{},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front-test/src/views/video/videoIndex.vue
已删除
100644 → 0
浏览文件 @
2ac385be
<
template
>
<div>
<div
id=
"dplayer"
></div>
</div>
</
template
>
<
script
>
export
default
{
name
:
"
videoIndex
"
,
data
()
{
return
{}
},
methods
:
{
},
created
()
{
}
}
</
script
>
<
style
scoped
>
</
style
>
\ No newline at end of file
YouBili_front/src/views/contribute/contribute.vue
浏览文件 @
7061f5ac
<!--投稿界面-->
<
template
>
<div
class=
"idxs"
>
<Handder></Handder>
<Sidebar></Sidebar>
<div
style=
"display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
height:700px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden"
>
<div
style=
"width: 1000px;height: 600px;margin-top: 20px;position: absolute"
>
<!-- 页面标题 -->
<h1
style=
"margin-bottom: 50px;text-align: center;color: #303133;font-family: 'Microsoft YaHei', sans-serif;"
>
投稿中心
</h1>
<!-- 视频标题 -->
<el-form
size=
"medium"
label-position=
"left"
ref=
"form"
:model=
"form"
label-width=
"80px"
>
<div
style=
"width: 500px"
>
<el-form-item
label=
"视频标题"
>
<el-input
v-model=
"form.name"
></el-input>
</el-form-item>
</div>
<!-- 视频描述 -->
<div>
<el-form-item
label=
"视频描述"
>
<el-input
v-model=
"form.name"
></el-input>
</el-form-item>
</div>
<!-- 视频分类 -->
<el-form-item
label=
"视频分类"
>
<el-select
v-model=
"form.region"
placeholder=
"请选择视频分类"
@
change=
"change"
>
<el-option
label=
"电影"
value=
"1"
></el-option>
<el-option
label=
"综艺"
value=
"2"
></el-option>
<el-option
label=
"搞笑"
value=
"3"
></el-option>
<el-option
label=
"动漫"
value=
"4"
></el-option>
</el-select>
</el-form-item>
<!-- 标签 -->
<el-form-item>
<el-tag
:key=
"tag"
v-for=
"tag in dynamicTags"
closable
:disable-transitions=
"false"
@
close=
"handleClose(tag)"
>
{{
tag
}}
</el-tag>
<el-input
class=
"input-new-tag"
v-if=
"inputVisible"
v-model=
"inputValue"
ref=
"saveTagInput"
size=
"small"
@
keyup.enter.native=
"handleInputConfirm"
@
blur=
"handleInputConfirm"
>
</el-input>
<el-button
v-else
class=
"button-new-tag"
size=
"small"
@
click=
"showInput"
>
+ New Tag
</el-button>
</el-form-item>
<!-- 上传封面 -->
<el-form-item
label=
"封面"
>
<el-upload
action=
"https://jsonplaceholder.typicode.com/posts/"
list-type=
"picture-card"
:on-preview=
"handlePictureCardPreview"
:on-remove=
"handleRemove"
>
<i
class=
"el-icon-plus"
></i>
</el-upload>
<el-dialog
:visible.sync=
"dialogVisible"
>
<img
width=
"100%"
:src=
"dialogImageUrl"
alt=
""
>
</el-dialog>
</el-form-item>
<!-- 上传视频 -->
<el-form-item
label=
"视频"
>
<video
muted
autoplay
controls
style=
"width: 200px; height: 150px;"
>
您的浏览器不支持播放此视频.
</video>
<el-upload
style=
"width: 300px"
action=
"/v1/upload"
accept=
"video/mp4,video/x-m4v,video/*"
name=
"file"
limit=
"1"
:on-success=
"handleSuccess"
:on-preview=
"handlePictureCardPreview"
:on-remove=
"handleRemove"
>
<el-button
type=
"primary"
>
点击上传
</el-button>
<div>
只能上传mp4文件,且不超过100MB
</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</div>
</
template
>
<
script
>
import
Handder
from
"
@/components/Handder.vue
"
;
import
Sidebar
from
"
@/components/sidebar.vue
"
;
export
default
{
name
:
"
contribute
"
,
components
:
{
Sidebar
,
Handder
},
data
()
{
return
{}
return
{
form
:
{
name
:
''
,
region
:
''
,
date1
:
''
,
date2
:
''
,
delivery
:
false
,
type
:
[],
resource
:
''
,
},
flag
:
"
1
"
,
dynamicTags
:
[
'
标签一
'
,
'
标签二
'
,
'
标签三
'
],
inputVisible
:
false
,
inputValue
:
''
,
fileList
:
[{
name
:
'
food.jpeg
'
,
url
:
'
https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100
'
},
{
name
:
'
food2.jpeg
'
,
url
:
'
https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100
'
}]
}
},
methods
:
{
onSubmit
()
{
console
.
log
(
'
submit!
'
);
},
change
(
key
)
{
this
.
flag
=
key
},
handleClose
(
tag
)
{
this
.
dynamicTags
.
splice
(
this
.
dynamicTags
.
indexOf
(
tag
),
1
);
},
handleInputConfirm
()
{
let
inputValue
=
this
.
inputValue
;
if
(
inputValue
)
{
this
.
dynamicTags
.
push
(
inputValue
);
}
this
.
inputVisible
=
false
;
this
.
inputValue
=
''
;
},
showInput
()
{
this
.
inputVisible
=
true
;
this
.
$nextTick
(()
=>
{
this
.
$refs
.
saveTagInput
.
$refs
.
input
.
focus
();
});
},
handleSuccess
(){
},
handleRemove
(
file
,
fileList
)
{
console
.
log
(
file
,
fileList
);
},
handlePreview
(
file
)
{
console
.
log
(
file
);
},
handleExceed
(
files
,
fileList
)
{
this
.
$message
.
warning
(
`当前限制选择 3 个文件,本次选择了
${
files
.
length
}
个文件,共选择了
${
files
.
length
+
fileList
.
length
}
个文件`
);
},
beforeRemove
(
file
,
fileList
)
{
return
this
.
$confirm
(
`确定移除
${
file
.
name
}
?`
);
},
handleClick
(
tab
,
event
)
{
console
.
log
(
tab
,
event
);
},
handlePictureCardPreview
(
file
)
{
this
.
dialogImageUrl
=
file
.
url
;
this
.
dialogVisible
=
true
;
},
dialogImageUrl
(){},
},
methods
:
{},
created
()
{
}
...
...
@@ -24,26 +171,22 @@ export default {
</
script
>
<
style
scoped
>
@media
screen
and
(
min-width
:
1970px
){
.idxs
{
margin
:
60px
auto
;
width
:
calc
(
100%
-
290px
);
max-width
:
1570px
;
min-width
:
1200px
;
}
.el-form-item
{
margin-bottom
:
50px
;
}
@media
screen
and
(
max-width
:
1969px
){
.idxs
{
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width
:
calc
(
100%
-
290px
);
max-width
:
1570px
;
min-width
:
1200px
;
margin
:
60px
auto
;
}
.el-tag
+
.el-tag
{
margin-left
:
10px
;
}
.button-new-tag
{
margin-left
:
10px
;
height
:
32px
;
line-height
:
30px
;
padding-top
:
0
;
padding-bottom
:
0
;
}
.input-new-tag
{
width
:
90px
;
margin-left
:
10px
;
vertical-align
:
bottom
;
}
</
style
>
\ No newline at end of file
YouBili_front/src/views/contribute/contributeManage.vue
浏览文件 @
7061f5ac
<!--投稿管理界面-->
<
template
>
<div
class=
"idxs"
>
<Handder></Handder>
<Sidebar></Sidebar>
</div>
<div
style=
"display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
height:700px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden"
>
<div
style=
"width: 1000px;height: 600px;margin-top: 20px;position: absolute"
>
<h1
style=
"margin-bottom: 50px;text-align: center;color: #303133;font-family: 'Microsoft YaHei', sans-serif;"
>
投稿管理
</h1>
<el-col
span=
"3"
>
<el-card
style=
"height: 500px"
>
<p
@
click=
"location.href='personal.html'"
>
个人信息
</p>
<p
style=
"color: orange"
>
稿件管理
</p>
</el-card>
</el-col>
<el-col
span=
"21"
>
<el-card>
<!--标签页卡开始-->
<el-tabs
type=
"card"
>
<el-tab-pane
label=
"视频"
name=
"1"
></el-tab-pane>
</el-tabs>
<!--标签页卡结束-->
<!--内容列表开始-->
<el-table
:data=
"contentArr"
border
>
<el-table-column
label=
"标题"
width=
"150px"
prop=
"title"
align=
"center"
></el-table-column>
<el-table-column
label=
"封面"
width=
"60px"
>
<template
slot-scope=
"scope"
>
<img
:src=
"scope.row.imgUrl"
width=
"50px"
>
</
template
>
</el-table-column>
<el-table-column
label=
"摘要"
width=
"300px"
align=
"center"
>
<!-- <template slot-scope="scope">
<!–scope.row代表当前行对应的数组里面的对象–>
<div v-html="scope.row.brief"></div>
</template>-->
</el-table-column>
<el-table-column
label=
"类型"
prop=
"categoryName"
align=
"center"
></el-table-column>
<el-table-column
label=
"浏览量"
prop=
"viewCount"
align=
"center"
></el-table-column>
<el-table-column
label=
"回复量"
prop=
"commentCount"
align=
"center"
></el-table-column>
<el-table-column
label=
"上传进度"
prop=
"upload"
align=
"center"
></el-table-column>
<el-table-column
label=
"创建时间"
width=
"300"
prop=
"createTime"
align=
"center"
></el-table-column>
<el-table-column
label=
"操作"
width=
"200px"
fixed=
"right"
align=
"center"
>
<
template
slot-scope=
"scope"
>
<el-button
size=
"mini"
type=
"success"
@
click=
"handleEdit(scope.$index, scope.row)"
>
编辑
</el-button>
<el-button
size=
"mini"
type=
"danger"
@
click=
"handleDelete(scope.$index, scope.row)"
>
删除
</el-button>
</
template
>
</el-table-column>
</el-table>
<!--内容列表结束-->
</el-card>
</el-col>
</div>
</div>
</template>
<
script
>
import
Handder
from
"
@/components/Handder.vue
"
;
import
Sidebar
from
"
@/components/sidebar.vue
"
;
export
default
{
name
:
"
contributeManage
"
,
components
:
{
Sidebar
,
Handder
},
data
()
{
return
{}
return
{
type
:
'
1
'
,
contentArr
:[
{
"
id
"
:
11
,
"
title
"
:
"
测试
"
,
"
brief
"
:
"
测试
"
,
"
imgUrl
"
:
"
files/a.jpg
"
,
"
type
"
:
1
,
"
categoryName
"
:
"
测试1
"
,
"
viewCount
"
:
8
,
"
commentCount
"
:
0
,
"
upload
"
:
"
正在上传
"
,
"
createTime
"
:
"
2023/03/27 19:51:45
"
},
]
}
},
methods
:
{
handleDelete
(
i
,
content
){
if
(
confirm
(
"
您确定删除此内容吗?
"
)){
//发出删除请求
axios
.
post
(
"
/v1/contents/
"
+
content
.
id
+
"
/delete
"
).
then
(
function
(
response
)
{
if
(
response
.
data
.
code
==
1
){
v
.
$message
.
success
(
"
删除完成!
"
);
v
.
contentArr
.
splice
(
i
,
1
);
//删除页面中的内容
}
})
}
},
handleEdit
(
i
,
content
){
location
.
href
=
"
/postArticle.html?id=
"
+
content
.
id
;
},
handleClick
(
tab
,
event
)
{
console
.
log
(
v
.
type
);
//this不是所有场景都能取代v, 只有在created方法中,this代表的是Vue对象
//其它位置this代表的是window对象
this
.
loadList
(
v
.
type
);
},
loadList
(
type
){
//发出获取内容的请求
axios
.
get
(
"
/v1/contents/
"
+
type
+
"
/management
"
).
then
(
function
(
response
)
{
if
(
response
.
data
.
code
==
1
){
v
.
contentArr
=
response
.
data
.
data
;
}
else
{
alert
(
"
请先登录!
"
);
location
.
href
=
"
/login.html
"
;
}
})
}
},
methods
:
{},
created
()
{
}
...
...
@@ -25,26 +131,20 @@ export default {
</
script
>
<
style
scoped
>
@media
screen
and
(
min-width
:
1970px
){
.idxs
{
margin
:
60px
auto
;
width
:
calc
(
100%
-
290px
);
max-width
:
1570px
;
min-width
:
1200px
;
}
.center
{
width
:
1200px
;
margin
:
0
auto
;
}
@media
screen
and
(
max-width
:
1969px
)
{
.idxs
{
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width
:
calc
(
100%
-
290px
);
max-width
:
1570px
;
min-width
:
1200px
;
margin
:
60px
auto
;
}
#footer_center
p
{
margin
:
0
;
}
#footer_center
h3
{
color
:
white
;
}
body
{
background-color
:
rgb
(
241
,
242
,
243
);
}
.el-header
{
background-color
:
white
;
}
</
style
>
\ No newline at end of file
YouBili_front/src/views/personal/history.vue
浏览文件 @
7061f5ac
...
...
@@ -3,8 +3,7 @@
<div
class=
"idxs"
>
<Handder></Handder>
<Sidebar></Sidebar>
<div
style=
"display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
<div
style=
"
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden"
>
<div
style=
"width: 1400px;height: 1000px;position: absolute;"
>
<span>
历史记录
</span>
...
...
@@ -123,5 +122,8 @@ export default {
min-width
:
1200px
;
margin
:
60px
auto
;
}
.idxs
{
margin-left
:
250px
;
}
}
</
style
>
\ No newline at end of file
YouBili_front/src/views/personal/notify.vue
浏览文件 @
7061f5ac
...
...
@@ -3,8 +3,7 @@
<div
class=
"idxs"
>
<Handder></Handder>
<Sidebar></Sidebar>
<div
style=
"display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
<div
style=
"
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden"
>
<div
style=
"width: 1400px;height: 1000px;position: absolute;"
>
...
...
@@ -113,6 +112,9 @@ export default {
min-width
:
1200px
;
margin
:
60px
auto
;
}
.idxs
{
margin-left
:
250px
;
}
}
.button-container
{
display
:
flex
;
...
...
YouBili_front/src/views/show/showHot.vue
浏览文件 @
7061f5ac
...
...
@@ -3,8 +3,7 @@
<div
class=
"idxs"
>
<Handder></Handder>
<sidebar></sidebar>
<div
style=
"display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
<div
style=
"
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden"
class=
"idxs"
>
<div
style=
"width: 1400px;height: 1000px;position: absolute;"
>
...
...
@@ -193,5 +192,8 @@ export default {
min-width
:
1200px
;
margin
:
60px
auto
;
}
.idxs
{
margin-left
:
250px
;
}
}
</
style
>
\ No newline at end of file
YouBili_front/src/views/video/videoIndex.vue
浏览文件 @
7061f5ac
<
template
>
<div>
<el-drawer
size=
"250px"
title=
"我是标题"
:visible.sync=
"drawer"
direction=
"ltr"
:with-header=
"false"
>
<Sidebar></Sidebar>
</el-drawer>
<Handder></Handder>
<button
class=
"btn"
@
click=
"drawer=true"
>
<i
class=
"el-icon-caret-right"
></i>
</button>
<div
class=
"idxs"
>
<el-row
>
<el-col
:span=
"18"
>
<
template
xmlns:align-items=
"http://www.w3.org/1999/xhtml"
>
<div>
<el-drawer
:visible.sync=
"drawer"
:with-header=
"false"
direction=
"ltr"
size=
"250px"
title=
"我是标题"
>
<Sidebar></Sidebar>
</el-drawer>
<Handder></Handder>
<button
class=
"btn"
@
click=
"drawer=true"
>
<i
class=
"el-icon-caret-right"
></i>
</button>
<div
class=
"idxs"
>
<div
style=
"margin-top: 10px"
>
<el-row
:gutter=
"10"
>
<el-col
:span=
"16"
>
<div>
<h1
class=
"title"
>
这是标题!!!
</h1>
</div>
<div>
<span><i
class=
"el-icon-video-play"
></i>
播放总数
</span>
<span
style=
"margin-left: 20px"
><i
class=
"el-icon-date"
></i>
弹幕数量
</span>
<span
style=
"margin-left: 20px"
><i
class=
"el-icon-timer"
></i>
2023-6-10
</span>
</div>
</el-col>
<el-col
:span=
"8"
>
<div
style=
"margin-left: 120px"
>
<el-card
styly=
"width: 250px;height: 20px"
>
<el-row>
<el-col
:span=
"8"
>
<el-popover
placement=
"top-start"
title=
"标题"
width=
"200"
trigger=
"hover"
content=
"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
>
<el-button
slot=
"reference"
>
<el-avatar
icon=
"el-icon-user-solid"
style=
"width: 40px;height: 40px"
></el-avatar></el-button>
</el-popover>
</el-col>
<el-col
:span=
"16"
>
<div>
作者名字
</div>
<div
style=
"margin-top: 10px"
>
<el-button
type=
"primary"
round
>
关注
</el-button></div>
</el-col>
</el-row>
</el-card>
</div>
</el-col>
</el-row>
</div>
<div>
<el-row
:gutter=
"0"
>
<el-col
:span=
"18"
>
<div>
<div
id=
"dplayer"
style=
"height: 585px;width: 1040px"
></div>
</div>
</el-col>
<el-col
:span=
"6"
>
<div>
<el-card
style=
"width: 300px"
>
</el-card>
</div>
</el-col>
</el-row>
</div>
<el-card>
<div
id=
"dplayer"
style=
"width:960px;height: 540px"
></div>
<div
style=
"height: 50px"
>
<p>
视频简介
</p>
</div>
</el-card>
</el-col
>
<el-col
:span=
"6"
>
<div
style=
"background-color: red;height: 400px"
></div>
</el-col>
</el-row>
<div
style=
"margin-top: 20px"
>
<hr>
<el-row
:gutter=
"10"
>
<el-col
:span=
"2"
>
<div>
<el-button
circle
class=
"button"
icon=
"el-icon-edit"
type=
"primary"
></el-button>
<p>
12
</p>
</div>
</el-col>
<el-col
:span=
"2"
>
<div>
<el-button
circle
class=
"button"
icon=
"el-icon-edit"
type=
"primary"
><span>
132
</span>
</el-button>
</div>
</el-col>
<el-col
:span=
"2"
>
<div>
<el-button
circle
class=
"button"
icon=
"el-icon-edit"
type=
"primary"
><span>
12
</span>
</el-button>
</div>
</el-col>
<el-col
:span=
"2"
>
<div>
<el-button
circle
class=
"button"
icon=
"el-icon-edit"
type=
"primary"
><span>
322
</span>
</el-button>
</div>
</el-col>
<el-col
:span=
"18"
>
<div></div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
...
...
@@ -38,105 +122,119 @@ import DPlayer from 'dplayer';
export
default
{
name
:
"
videoIndex
"
,
components
:
{
Handder
,
Sidebar
},
data
()
{
return
{
dp
:
""
,
drawer
:
false
dp
:
""
,
drawer
:
false
};
},
methods
:
{
created
()
{
},
mounted
()
{
this
.
dp
=
new
DPlayer
({
//播放器的一些参数
container
:
document
.
getElementById
(
'
dplayer
'
),
video
:
{
quality
:
[
// 指定视频清晰度选项
{
name
:
'
超清
'
,
// 清晰度名称
url
:
'
http://youbili-test.oss-cn-beijing.aliyuncs.com/TestVideo-1080P.mp4
'
,
// 视频源地址
type
:
'
normal
'
// 视频类型
},
{
name
:
'
高清
'
,
url
:
'
http://youbili-test.oss-cn-beijing.aliyuncs.com/2023-05-20%2018-05-48.mp4
'
,
type
:
'
normal
'
},
{
name
:
'
标清
'
,
url
:
'
http://youbili-test.oss-cn-beijing.aliyuncs.com/TestVideo-360P.mp4
'
,
type
:
'
normal
'
}
],
defaultQuality
:
0
,
// 指定默认清晰度索引,从0开始
},
danmaku
:
{
// 指定弹幕功能选项
id
:
'
demo
'
,
// 弹幕id,用于区分不同视频的弹幕
api
:
'
https://api.prprpr.me/dplayer/
'
,
// 弹幕源地址
user
:
'
Bing
'
,
// 弹幕发送者名称
bottom
:
'
15%
'
,
// 弹幕距离底部的距离
unlimited
:
true
,
// 是否允许无限滚动弹幕
},
autoplay
:
false
,
//是否自动播放
theme
:
'
#FADFA3
'
,
//主题色
loop
:
true
,
//视频是否循环播放
lang
:
'
zh-cn
'
,
screenshot
:
false
,
//是否开启截图
hotkey
:
true
,
//是否开启热键
preload
:
'
auto
'
,
//视频是否预加载
volume
:
0.7
,
//默认音量
mutex
:
true
,
//阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
});
},
created
()
{
this
.
dp
=
new
DPlayer
({
//播放器的一些参数
container
:
document
.
getElementById
(
'
dplayer
'
),
video
:
{
quality
:
[
// 指定视频清晰度选项
{
name
:
'
超清
'
,
// 清晰度名称
url
:
'
http://youbili-test.oss-cn-beijing.aliyuncs.com/TestVideo-1080P.mp4
'
,
// 视频源地址
type
:
'
mp4
'
// 视频类型
},
{
name
:
'
高清
'
,
url
:
'
http://youbili-test.oss-cn-beijing.aliyuncs.com/2023-05-20%2018-05-48.mp4
'
,
type
:
'
mp4
'
},
{
name
:
'
标清
'
,
url
:
'
http://youbili-test.oss-cn-beijing.aliyuncs.com/TestVideo-360P.mp4
'
,
type
:
'
mp4
'
}
],
defaultQuality
:
0
,
// 指定默认清晰度索引,从0开始
},
danmaku
:
{
// 指定弹幕功能选项
id
:
'
demo
'
,
// 弹幕id,用于区分不同视频的弹幕
api
:
'
https://api.prprpr.me/dplayer/
'
,
// 弹幕源地址
user
:
'
Bing
'
,
// 弹幕发送者名称
bottom
:
'
15%
'
,
// 弹幕距离底部的距离
unlimited
:
true
,
// 是否允许无限滚动弹幕
},
autoplay
:
false
,
//是否自动播放
theme
:
'
#FADFA3
'
,
//主题色
loop
:
false
,
//视频是否循环播放
lang
:
'
zh-cn
'
,
screenshot
:
false
,
//是否开启截图
hotkey
:
true
,
//是否开启热键
preload
:
'
auto
'
,
//视频是否预加载
volume
:
0.7
,
//默认音量
mutex
:
true
,
//阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
});
},
components
:
{
Handder
,
Sidebar
}
}
methods
:
{}
};
</
script
>
<
style
scoped
>
@media
screen
and
(
min-width
:
1970px
){
.idxs
{
margin
:
60px
auto
;
width
:
calc
(
100%
-
290px
);
max-width
:
1570px
;
min-width
:
1200px
;
}
@media
screen
and
(
min-width
:
1970px
)
{
.idxs
{
margin
:
60px
auto
;
width
:
calc
(
100%
-
290px
);
max-width
:
1570px
;
min-width
:
1200px
;
}
}
@media
screen
and
(
max-width
:
1969px
){
.idxs
{
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width
:
calc
(
100%
-
290px
);
max-width
:
1570px
;
min-width
:
1200px
;
margin
:
60px
auto
;
}
@media
screen
and
(
max-width
:
1969px
)
{
.idxs
{
/*width: 1270px;*/
/*min-width: 1000px;*/
/*margin-top: 60px;*/
/*margin-left: 270px;*/
/*padding: 40px;*/
width
:
calc
(
100%
-
290px
);
max-width
:
1570px
;
min-width
:
1200px
;
margin
:
60px
auto
;
}
}
.btn
{
position
:
fixed
;
top
:
50%
;
left
:
0
;
transform
:
translateY
(
-50%
);
height
:
80px
;
width
:
40px
;
text-align
:
center
;
line-height
:
80px
;
cursor
:
pointer
;
background-color
:
skyblue
;
color
:
#fff
;
font-size
:
30px
;
border-top-right-radius
:
10px
;
border-bottom-right-radius
:
10px
;
position
:
fixed
;
top
:
50%
;
left
:
0
;
transform
:
translateY
(
-50%
);
height
:
80px
;
width
:
40px
;
text-align
:
center
;
line-height
:
80px
;
cursor
:
pointer
;
background-color
:
skyblue
;
color
:
#fff
;
font-size
:
30px
;
border-top-right-radius
:
10px
;
border-bottom-right-radius
:
10px
;
}
.btn
:hover
{
background-color
:
steelblue
;
background-color
:
steelblue
;
}
.button
{
margin-top
:
10px
;
margin-left
:
5px
;
}
.title
{
font-family
:
"Microsoft YaHei"
,
Arial
,
sans-serif
;
font-size
:
36px
;
font-weight
:
bold
;
}
</
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录