Skip to content

Y
YoubiliProject

代码敲不队 / YoubiliProject

通知 7
Star 1
Fork 0
Y
YoubiliProject

体验新版 GitCode，发现更多精彩内容 >>

提交 4eb90326 编写于 作者: 喷火的神灵's avatar 喷火的神灵 🎱
浏览文件
操作

前端页面修改

上级 3a65532c
隐藏空白更改
内联 并排
Showing with 3584 addition and 250 deletion
YouBili_front-test/.eslintrc.js 0 → 100644
浏览文件 @ 4eb90326
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 0 → 100644
浏览文件 @ 4eb90326
# 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/index.html 0 → 100644
浏览文件 @ 4eb90326
<!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 0 → 100644
浏览文件 @ 4eb90326
<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/components/Handder.vue 0 → 100644
浏览文件 @ 4eb90326
<!--头部导航栏-->
<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 0 → 100644
浏览文件 @ 4eb90326
<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 0 → 100644
浏览文件 @ 4eb90326
<!--侧边栏-->
<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 0 → 100644
浏览文件 @ 4eb90326
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 0 → 100644
浏览文件 @ 4eb90326
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 0 → 100644
浏览文件 @ 4eb90326
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 0 → 100644
浏览文件 @ 4eb90326
<!--管理员界面-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--管理员登录界面-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--投稿界面-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--投稿管理界面-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--购买界面-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--支付界面-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--收藏-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--动态-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--粉丝-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--关注-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--历史-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--通知-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--他人空间-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--个人中心-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--举报-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--主页-->
<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(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
\ No newline at end of file
YouBili_front-test/src/views/show/Search.vue 0 → 100644
浏览文件 @ 4eb90326
<!--搜索页-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--分类-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--热门-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--登录-->
<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 0 → 100644
浏览文件 @ 4eb90326
<!--注册-->
<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 0 → 100644
浏览文件 @ 4eb90326
<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/App.vue
浏览文件 @ 4eb90326
<template>
<div id="app">
<handder></handder>
<div id="content">
<sidebar-vue></sidebar-vue>
<div class="i_w">
<router-view/>
</div>
</div>
<!-- <handder></handder>-->
<!-- <div id="content">-->
<!-- <sidebar-vue></sidebar-vue>-->
<!-- <div class="i_w">-->
<router-view/>
<!-- </div>-->
<!-- -->
<!-- </div>-->
</div>
</template>
<script>
import sidebarVue from './components/sidebar.vue'
import Handder from './components/Handder.vue';
export default {
components:{
Handder,
sidebarVue
}
}
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; */
}
* {
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/src/components/Handder.vue
浏览文件 @ 4eb90326
......@@ -151,100 +151,20 @@
<!-- 登录的弹窗 -->
<el-dialog title="" width="600px" :visible.sync="dialogVisible">
<el-tabs style="margin:0 auto" type="border-card">
<el-tab-pane style="height: 250px" 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: 250px" 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="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</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>
<login :isTrue="dialogVisible" @close="dialogVisible=false"></login>
</div>
</template>
<script>
import login from "./login"
export default {
name: "handder",
components: {
login
},
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
isLogin: false,
login: {
username: '', // 登录要输入的用户名
password: '' // 登录要输入的密码
},
ruleForm: {
username: '', // 用户名
pass: '', // 密码
checkPass: '', // 再次输入密码
},
// 验证规则
loginRules: {
username: [
{ required: true, message: "请输入用户名", trigger: 'blur'}
],
password: [
{ required: true, message: "请输入密码", trigger: 'blur'}
]
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: 'blur'}
],
pass: [
{ validator: validatePass, trigger: 'blur' },
{ required: true }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' },
{ required: true }
]
},
dialogVisible: false, // 登录注册弹窗
src: null, // 图片路径
restaurants: [], // 输入框模糊查询出的数据 需要后台传输
......@@ -356,37 +276,7 @@
{value:"选择5",index:5}
]
},
// 提交按钮
//forName 当用户输入为空时,会提示用户名和密码不能为空
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置按钮
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 提交按钮
loginForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('login!');
} else {
console.log('error login!!');
return false;
}
});
},
// 重置按钮
resForm(formName) {
this.$refs[formName].resetFields();
}
},
created() {
......@@ -412,7 +302,7 @@
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99;
z-index: 99999;
}
#left {
width: 200px;
......
YouBili_front/src/components/login.vue 0 → 100644
浏览文件 @ 4eb90326
<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) {
// 登录成功之后给弹窗隐藏
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 if(res.data.status == 401 ){
this.$message.error(res.data.message);
} else{
this.$message.error(res.data.message);
}
});
},
// 重置按钮
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)
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/src/views/contribute/contribute.vue
浏览文件 @ 4eb90326
<!--投稿界面-->
<template>
<div></div>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "contribute",
components: {Sidebar, Handder},
data() {
return {}
},
......@@ -17,5 +24,26 @@ 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;
}
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/contribute/contributeManage.vue
浏览文件 @ 4eb90326
<!--投稿管理界面-->
<template>
<div></div>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "contributeManage",
components: {Sidebar, Handder},
data() {
return {}
},
......@@ -17,5 +25,26 @@ 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;
}
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/pay/commodity.vue
浏览文件 @ 4eb90326
<!--购买界面-->
<template>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div>
购买界面
<div style="justify-content: center;align-items: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div id="change_group">
<el-radio-group v-model="radio1">
<el-radio-button label="月度"></el-radio-button>
<el-radio-button label="季度"></el-radio-button>
<el-radio-button label="年度"></el-radio-button>
</el-radio-group>
</div>
<div>
<el-card class="box-card">
<div class="text item">
<router-link to="/pay">
<el-button class="pay_button" type="primary">立即购买</el-button>
</router-link> </div>
</el-card>
</div>
<div>
<el-card class="box-card">
<div class="text item">
<router-link to="/pay">
<el-button class="pay_button" type="primary">立即购买</el-button>
</router-link> </div>
</el-card>
</div>
<div>
<el-card class="box-card">
<div class="text item">
<router-link to="/pay">
<el-button class="pay_button" type="primary">立即购买</el-button>
</router-link>
</div>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "commodity",
components: {Sidebar, Handder},
data() {
return {}
return {
radio1: '月度',
}
},
methods: {
},
methods: {},
created() {
}
......@@ -19,5 +69,56 @@ export default {
</script>
<style scoped>
#change_group{
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 14px;
}
.item {
padding: 10px 0;
}
.box-card {
position: relative;
width: 350px;
height: 700px;
margin-top: 30px;
margin-left:100px;
float: left;
}
.pay_button{
position: absolute;
bottom: 30px;
/* 宽度与卡片内容一致 */
width: 300px;
/* 高度为 50px，即按钮的高度 */
height: 50px;
left: 24px;
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/pay/pay.vue
浏览文件 @ 4eb90326
<!--支付界面-->
<template>
<div>支付界面</div>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div style="justify-content: center;align-items: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div class="wai_d">
<div class="nei_d">
<div class="h">
<h2>会员购买</h2>
</div>
<div class="head_div">
<div>
<div class="title_d">
<h2>YouBili</h2>
<el-tag type="info">待付款</el-tag>
</div>
<p>官方网站: YouBili.com</p>
<p>官方邮箱: xxxxxxxxxx.email</p>
<p>最终解释权归 YouBili 所有，若订单出现争议，请及时联系在线客服咨询处理</p>
</div>
<div class="content_d">
<div>
<h4>注意事项:</h4>
<p class="content_p">1、该商品购买后不支持退款</p>
<p class="content_p">2、存在生效服务的情况下新购服务不会立即生效</p>
<p>3、已购买的服务可到订单中心进行查看</p>
<p>4、若用于非法犯罪行为,官方有权停止提供服务</p>
<p>详细服务条款请查阅《YouBili 服务使用协议》</p>
</div>
<div>
<h4>付款细节:</h4>
<p>订单金额:</p>
<p>支付方式</p>
<p>购买用户:</p>
<p>邮箱地址:</p>
<p>下单时间:</p>
</div>
</div>
<div class="pay_d">
<div>
<el-select v-model="value" placeholder="支付方式">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="price_d">
<p>账户余额:</p>
<p>订单金额:</p>
</div>
</div>
</div>
</div>
<div class="card_d">
<el-card class="box-card">
<div class="text_item">
<el-button class="pay_b" type="info" plain disabled>下载订单</el-button>
<el-button class="pay_b" type="info" plain disabled>打印订单</el-button>
<router-link to="/commodity">
<el-button class="pay_b" type="info">取消订单</el-button>
</router-link>
<el-button class="pay_b" type="primary">确认购买</el-button>
</div>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "pay",
components: {Sidebar, Handder},
data() {
return {}
return {
options: [{
value: '选项1',
label: '微信支付'
}, {
value: '选项2',
label: '支付宝'
}],
value: ''
}
},
methods: {},
created() {
......@@ -17,5 +106,100 @@ export default {
</script>
<style scoped>
.wai_d{
width: 100%;
display: flex;
justify-content: space-between;
}
.nei_d{
width: 75%;
}
.h {
width: 100%;
margin-top: 2%;
margin-left: 2%;
}
.head_div {
background-color: white;
border: 1px solid #ccc;
border-bottom: none;
width: 100%;
margin-left: 2%;
margin-top: 2%;
}
.card_d{
width: 20%;
margin-top: 5%;
}
.head_div > div {
border-bottom: 1px solid #ccc;
box-sizing: border-box;
padding: 15px;
}
.title_d {
display: flex;
justify-content: space-between;
}
.content_d {
display: flex;
justify-content: space-between;
}
.content_d > div {
width: 40%;
}
.pay_d {
display: flex;
justify-content: space-between;
}
.head_div p {
margin: 5px 0;
}
.price_d {
margin-right: 150px;
}
.text_item{
font-size: 14px;
padding: 18px 0;
}
.pay_b{
width: 100%;
margin: 12px auto;
padding: 10px;
}
.content_p{
color: red;
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/fans.vue
浏览文件 @ 4eb90326
......@@ -17,5 +17,26 @@ 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;
}
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/follow.vue
浏览文件 @ 4eb90326
<!--关注-->
<!--个人中心-->
<template>
<div>关注</div>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div style="display: flex;
justify-content: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1400px;height: 1000px;position: absolute;">
<h1 style="font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
<div style="width: 1300px;height: 120px;margin-left: 50px;margin-bottom: 50px;position: relative">
<el-card>
<el-avatar style="margin-bottom: 15px;float:left;width: 100px;height: 100px;" :src="avatarUrl"
alt="头像" :round="true"></el-avatar>
<ul style="float: left;margin-top: 30px;margin-left: 30px;list-style-type: none">
<li>昵称:</li>
<li>生日:</li>
<li>会员等级:</li>
</ul>
<div style="width: 300px;float: right;padding-top: 20px">
<div style="margin-left: 130px;height: 36px">
</div>
<el-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical"
:colon="false">
<el-descriptions-item label="关注数">1</el-descriptions-item>
<el-descriptions-item label="粉丝数">1</el-descriptions-item>
<el-descriptions-item label="获赞数">1</el-descriptions-item>
<el-descriptions-item label="播放数">1</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
</div>
<div>
<el-card style="margin-top:300px;margin-left: 5px;">
<div class="text_item">
佩奇
</div>
</el-card>
<el-card class="box_card">
<div class="text_item">
佩奇
</div>
</el-card>
<el-card class="box_card">
<div class="text_item">
佩奇
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "follow",
data() {
return {}
},
methods: {},
created() {
name: "personalCenter",
components: {Sidebar, Handder},
data() {
return {
size: "200",
avatarUrl: require('@/assets/a.jpg')
}
},
methods: {},
created() {
}
}
}
</script>
<style scoped>
h2 {
font-weight: normal;
}
i {
display: inline-block;
margin-left: 20px;
}
.text_item {
font-size: 14px;
padding: 18px 0;
}
.box_card {
width: 1300px;
margin-left: 5px;
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/history.vue
浏览文件 @ 4eb90326
<!--历史-->
<!--历史记录-->
<template>
<div>历史</div>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div style="display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1400px;height: 1000px;position: absolute;">
<span>历史记录</span>
<span class="button-container"> <el-button>搜索历史记录</el-button></span>
<span class="button-container"> <el-button>清空历史记录</el-button></span>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
<div style="width: 1400px;height: 1000px;position: absolute;">
<br>
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="400px" height="300px" > </div>
<div style="float:right">
<div class="box" style="width:800px;height:80px;justify-content: center;">标题</div>
<div class="box" style="width:800px;height:80px;margin:30px 0 ">
<span style="margin-left: 40px"> <el-avatar style="width:80px;height: 80px"><img src="../../../public/史迪仔.jpg"></el-avatar></span>
<span > 作者昵称</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">清除记录</span>
</div>
<div class="box" style="width:800px;height:80px;">
<span style="margin-left: 120px">观看时间</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">时间戳</span>
</div>
</div>
</div>
<br>
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="400px" height="300px" > </div>
<div style="float:right">
<div class="box" style="width:800px;height:80px;justify-content: center;">标题</div>
<div class="box" style="width:800px;height:80px;margin:30px 0 ">
<span style="margin-left: 40px"> <el-avatar style="width:80px;height: 80px"><img src="../../../public/史迪仔.jpg"></el-avatar></span>
<span > 作者昵称</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">清除记录</span>
</div>
<div class="box" style="width:800px;height:80px;">
<span style="margin-left: 120px">观看时间</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">时间戳</span>
</div>
</div>
</div>
<br>
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="400px" height="300px" > </div>
<div style="float:right">
<div class="box" style="width:800px;height:80px;justify-content: center;">标题</div>
<div class="box" style="width:800px;height:80px;margin:30px 0 ">
<span style="margin-left: 40px"> <el-avatar style="width:80px;height: 80px"><img src="../../../public/史迪仔.jpg"></el-avatar></span>
<span > 作者昵称</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">清除记录</span>
</div>
<div class="box" style="width:800px;height:80px;">
<span style="margin-left: 120px">观看时间</span>
<span style="display: flex; justify-content: flex-end;margin-left: auto;">时间戳</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "history",
components: {Sidebar, Handder},
data() {
return {}
return {
size:"200",
avatarUrl:""
}
},
methods: {},
created() {
......@@ -18,4 +93,35 @@ export default {
<style scoped>
.button-container {
display: flex;
justify-content: flex-end;
float:right;
}
.box {
display: flex;
align-items: center;
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/notify.vue
浏览文件 @ 4eb90326
<!--通知-->
<template>
<div>通知</div>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
<div style="display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div style="width: 1400px;height: 1000px;position: absolute;">
<div><el-page-header @back="goBack" content="返回"></el-page-header></div>
<br>
<!--卡片 -->
<el-card>
<!--让编辑按钮处于一行的右侧-->
<div style="display: flex; justify-content: space-between;">
<span>全部消息</span>
<el-button type="primary">编辑</el-button>
</div>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
<b>标题</b>
<br>内容
<br><span style="display: inline-block;margin-left:1200px">日期</span>
<el-divider content-position="right"></el-divider>
</el-card>
<div style="width: 1400px;height: 1000px;position: absolute;">
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "notify",
components: {Sidebar, Handder},
data() {
return {}
return {
size:"200",
avatarUrl:""
}
},
methods: {},
created() {
......@@ -17,5 +92,35 @@ 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;
}
}
@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;
}
}
.button-container {
display: flex;
justify-content: flex-end;
float:right;
}
.box {
display: flex;
align-items: center;
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/otherSpace.vue
浏览文件 @ 4eb90326
<!--他人空间-->
<!--他人中心-->
<template>
<div>他人空间</div>
<div>
<Handder></Handder>
<sidebar></sidebar>
<div class="idxs">
<div >
<h1 >XXX的个人中心</h1>
<div >
<el-card>
<el-avatar style="margin-bottom: 15px;float:left;width: 100px;height: 100px;" :src="avatarUrl"
alt="头像" :round="true"></el-avatar>
<ul style="float: left;margin-top: 30px;margin-left: 30px;list-style-type: none">
<li>昵称:</li>
<li>生日:</li>
<li>会员等级:</li>
</ul>
<div style="width: 300px;float: right;padding-top: 20px">
<div style="margin-left: 130px">
<span><el-button plain style="padding: 10px">
<i style="margin-left: 0" class="el-icon-edit"></i>关注他</el-button></span>
<span><el-button plain style="padding: 10px">
<i style="margin-left: 0" class="el-icon-edit"></i>动态</el-button></span>
</div>
<el-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical"
:colon="false">
<el-descriptions-item label="关注数">1</el-descriptions-item>
<el-descriptions-item label="粉丝数">1</el-descriptions-item>
<el-descriptions-item label="获赞数">1</el-descriptions-item>
<el-descriptions-item label="播放数">1</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
<div style="width: 1300px;margin-top: 30px;margin-left: 50px;height: 900px;">
<el-card>
<h2>XXX的视频</h2>
<el-divider></el-divider>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
</div>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
</div>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img src="../../assets/1.png"
style="width: 300px;height: 200px;margin-left: 100px"></span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i
class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<div style="margin-top: 15px;text-align: center">
<el-button plain>查看更多</el-button>
</div>
</div>
<el-divider></el-divider>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "otherSpace",
name: "personalCenter",
components: {Sidebar, Handder},
data() {
return {}
return {
size: "200",
avatarUrl: "../../assets/1.png"
}
},
methods: {},
created() {
......@@ -18,4 +130,36 @@ export default {
<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 (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;
}
}
h2 {
font-weight: normal;
}
i {
display: inline-block;
margin-left: 20px;
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/personalCenter.vue
浏览文件 @ 4eb90326
<!--个人中心-->
<template>
<div>
个人中心
<Handder></Handder>
<sidebar></sidebar>
<div style="display: flex;
justify-content: center;
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
<div class="idxs">
<h1 style="font-size: 45px;text-align: center;margin-top: 30px;margin-bottom: 30px">XXX的个人中心</h1>
<div style="width: 1300px;height: 120px;margin-left: 50px;margin-bottom: 50px">
<el-card>
<el-avatar style="margin-bottom: 15px;float:left;width: 100px;height: 100px;" :src="avatarUrl" alt="头像" :round="true"></el-avatar>
<ul style="float: left;margin-top: 30px;margin-left: 30px;list-style-type: none">
<li>昵称:</li>
<li>生日:</li>
<li>会员等级:</li>
</ul>
<div style="width: 300px;float: right;padding-top: 20px">
<div style="margin-left: 130px;height: 36px">
</div>
<el-descriptions style="margin-left: 10px;" class="margin-top" :column="4" direction="vertical" :colon="false">
<el-descriptions-item label="关注数">1</el-descriptions-item>
<el-descriptions-item label="粉丝数">1</el-descriptions-item>
<el-descriptions-item label="获赞数">1</el-descriptions-item>
<el-descriptions-item label="播放数">1</el-descriptions-item>
</el-descriptions></div>
</el-card>
</div>
<div style="width: 1300px;margin-top: 30px;margin-left: 50px;height: 1000px;">
<el-card>
<h2>我的视频</h2><el-divider></el-divider>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"></span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"></span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"></span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
</div>
<el-divider></el-divider>
<h2>我的收藏</h2><el-divider></el-divider>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"> </span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
</div>
<el-divider></el-divider>
<h2>我的历史</h2><el-divider></el-divider>
<div>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 80px"> </span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span>
<span><img src="../../assets/1.png" style="width: 300px;height: 200px;margin-left: 100px"> </span><br>
<span style="display: inline-block;margin-left: 270px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 295px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<span style="display: inline-block;margin-left: 290px"><i class="el-icon-chat-line-round"></i><i class="el-icon-video-play"><i class="el-icon-folder-opened"></i></i></span>
<div style="margin-top: 15px;text-align: center"><el-button plain>查看更多</el-button></div>
</div>
<el-divider></el-divider>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from "@/components/sidebar.vue";
import Handder from "@/components/Handder.vue";
export default {
name: "personalCenter",
components: {Handder, Sidebar},
data() {
return {}
return {
size:"200",
avatarUrl:""
}
},
methods: {},
created() {
......@@ -19,5 +104,34 @@ 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;
}
}
@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;
}
}
h2{
font-weight: normal;
}
i{
display: inline-block;
margin-left: 20px;
}
</style>
\ No newline at end of file
YouBili_front/src/views/personal/report.vue
浏览文件 @ 4eb90326
<!--举报-->
<template>
<div>举报</div>
<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">
<el-form-item label="违规描述">
<el-input v-model="form.name"></el-input>
</el-form-item>
<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 v-if="flag==1" label="违规类型">
<el-checkbox-group v-model="form.type">
<el-checkbox label="违规类型1" name="type"></el-checkbox>
<el-checkbox label="违规类型2" name="type"></el-checkbox>
<el-checkbox label="违规类型3" name="type"></el-checkbox>
<el-checkbox label="违规类型4" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-else-if="flag==2" label="违规性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="违规类型5" name="type"></el-checkbox>
<el-checkbox label="违规类型6" name="type"></el-checkbox>
<el-checkbox label="违规类型7" name="type"></el-checkbox>
<el-checkbox label="违规类型8" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-else-if="flag==3" label="违规性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="违规类型9" name="type"></el-checkbox>
<el-checkbox label="违规类型10" name="type"></el-checkbox>
<el-checkbox label="违规类型11" name="type"></el-checkbox>
<el-checkbox label="违规类型12" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-else-if="flag==4" label="违规性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="违规类型13" name="type"></el-checkbox>
<el-checkbox label="违规类型14" name="type"></el-checkbox>
<el-checkbox label="违规类型15" name="type"></el-checkbox>
<el-checkbox label="违规类型16" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="违规内容">
<el-radio-group v-model="form.resource">
<el-radio label="视频资源"></el-radio>
<el-radio label="言论"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="留言 ">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交举报</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import Sidebar from "@/components/sidebar.vue";
import Handder from "@/components/Handder.vue";
export default {
name: "report",
data() {
return {}
},
methods: {},
created() {
name: "report",
components: {Handder, Sidebar},
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
}, flag: "1"
}
}
},
methods: {
onSubmit() {
console.log('submit!');
},
change(key) {
this.flag = key
}
},
created() {
}
}
</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 (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-form-item {
margin-bottom: 50px;
}
</style>
\ No newline at end of file
YouBili_front/src/views/show/IndexView.vue
浏览文件 @ 4eb90326
<!--主页-->
<template>
<div id="idx">
<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 id="el_box" :gutter="20">
<el-col :span="12">
<div class="sp_box"></div>
</el-col>
<el-col :span="12">
<div class="sp_box"></div>
<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-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>
</el-col>
</el-row>
</div>
</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-row :gutter="20">
<router-link to="/videoIndex">
<el-col v-for="(v,i) of sum" :key="i" :span="8">
<div class="sp_box" style="height: 300px;">
视频页面
</div>
</el-col>
</router-link>
</el-row>
</div>
<el-backtop :bottom="50" :right="8" :visibility-height="100"></el-backtop>
</div>
<el-backtop :bottom="50" :right="8" :visibility-height="100"></el-backtop>
</div>
</template>
<!--
1. 将两个组件引入进来,头部导航栏 Handder , sidebar . 在大的<div></div>里面添加<Handder></Handder> <sidebarVue></sidebarVue>,
2. 在自己的<div></div> 需要引入class="idxs"
3. 在Style里面添加"idxs"样式
-->
<script>
import Handder from "@/components/Handder";
import sidebarVue from "@/components/sidebar";
export default {
name: "index",
components:{
Handder,
sidebarVue
},
data() {
return {
sum: 10,
......@@ -109,11 +117,31 @@ export default {
}
#idx {
width: 1270px;
min-width: 1000px;
padding: 40px;
margin: 0 auto;
}
@media screen and (min-width: 1970px){
.idxs {
margin: 0 auto;
width: calc(100% - 290px);
max-width: 1970px;
min-width: 1500px;
}
}
@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;
min-width: 1500px;
}
}
.lunbo {
width: 500px;
}
......
YouBili_front/src/views/show/Search.vue
浏览文件 @ 4eb90326
<!--搜索页-->
<template>
<div>搜索页</div>
<div class="idxs">
<Handder></Handder>
<sidebar></sidebar>
搜索页</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "Search",
components: {Sidebar, Handder},
data() {
return {}
},
......@@ -17,5 +25,26 @@ 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;
}
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/show/classification.vue
浏览文件 @ 4eb90326
<!--分类-->
<template>
<div>分类</div>
<div class="idxs">
<Handder></Handder>
<Sidebar></Sidebar>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "classification",
components: {Sidebar, Handder},
data() {
return {}
},
......
YouBili_front/src/views/show/showHot.vue
浏览文件 @ 4eb90326
<!--热门-->
<template>
<div>热门</div>
<div class="idxs">
<Handder></Handder>
<sidebar></sidebar>
<div style="display: flex;
justify-content: center;align-items: center; width: calc(100vw - 500px);
height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden" class="idxs">
<div style="width: 1400px;height: 1000px;position: absolute;">
<!--标签页-->
<el-tabs v-model="activeName" @tab-click="handleClick" tab-size="small">
<el-tab-pane label="热门排行" name="first" class="tab-label"></el-tab-pane>
<el-tab-pane label="最新排行" name="second" class="tab-label"></el-tab-pane>
<el-tab-pane label="感兴趣的" name="third" class="tab-label"></el-tab-pane>
</el-tabs>
<div style="width: 1400px;height: 1000px;position: absolute;">
<br>
<el-row>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<!--使用Icon图标组件-->
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div style="width:1200px;height:300px;margin-left:100px">
<div style="float:left"><img src="../../../public/史迪仔.jpg" width="300px" height="300px" > </div>
<div style="float:left">
<div class="box" style="width:350px;height:70px;justify-content: center;">视频描述</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">作者</div>
<div class="box" style="width:350px;height:70px;margin-left: 40px">类型</div>
<div class="box" style="width:400px;height:70px;">
<span style="margin-left: 40px"><i class="el-icon-view">观看次数</i></span>
<span style="display: flex; justify-content: flex-end;margin-left: 140px;"><i class="el-icon-chat-dot-square">评论数</i></span>
</div>
</div>
</div>
</el-col>
</el-row>
<br>
<!--分割线-->
<el-divider content-position="right"></el-divider>
<div align="center">
<!--分页 当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。-->
<el-pagination
:hide-on-single-page="value"
:total="5"
layout="prev, pager, next">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
export default {
name: "showHot",
components: {Sidebar, Handder},
data() {
return {}
return {
size:"200",
avatarUrl:""
}
},
methods: {},
created() {
......@@ -18,4 +162,36 @@ export default {
<style scoped>
.tab-label {
font-size: 300px; /* 调整文字大小为16px，可根据需要进行修改 */
}
.box {
display: flex;
align-items: center;/* 调整文字位置,让其垂直居中 */
}
@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;
}
}
</style>
\ No newline at end of file
YouBili_front/src/views/video/videoIndex.vue
浏览文件 @ 4eb90326
<template>
<div>
<div id="dplayer"></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">
<el-card>
<div id="dplayer" style="width:960px;height: 540px"></div>
</el-card>
</el-col >
<el-col :span="6">
<div style="background-color: red;height: 400px"></div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";
import DPlayer from 'dplayer';
export default {
name: "videoIndex",
data() {
return {
dp: "",
drawer: false
};
},
methods: {
name: "videoIndex",
data() {
return {}
},
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, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
});
},
methods: {
created() {
},
components: { Handder, Sidebar }
}
</script>
},
created() {
<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 (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;
}
}
</script>
.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;
}
.btn:hover {
background-color: steelblue;
}
<style scoped>
</style>
\ No newline at end of file
YouBili_front/vue.config.js
浏览文件 @ 4eb90326
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
transpileDependencies: true,
lintOnSave: false
})
youbili-project-backend/src/main/java/cn/tedu/youbiliprojectbackend/controller/UserController.java 0 → 100644
浏览文件 @ 4eb90326
package cn.tedu.youbiliprojectbackend.controller;
public class UserController {
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或