pxl/tk-page-Fan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui设计

Browse Source
This commit is contained in:
没复习
2025-04-09 21:07:15 +08:00
parent 758fdb49c2
commit b71c2bd071
24 changed files with 1144 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/views/HomeView.vue
View File

@@ -1,15 +1,13 @@
<template>
<div class="main">
<!-- <button @click="callPython">设置数据"123"到 Python</button>
<button @click="getPythonData">从 Python 获取数据</button> -->
<!-- <input type="text" id="input" v-model="inputValue"></input>
<div id="output">{{ output }}</div> -->
<div class="container">
<div class="left">
</div>
<div class="right">
<!-- 视频背景 -->
<video autoplay loop muted class="background-video">
<source :src="require('@/assets/video/bg.mp4')" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<!-- 设置 -->
<div class="center-align">
<div></div>
@@ -28,53 +26,45 @@
</div>
</div>
</div>
<!-- logo -->
<div class="logo">
<div style="height: 80px; width: 300px; background-color: aqua;">
</div>
</div>
<!-- From -->
<div class="from">
<div class="from-title">
<div>账号登陆</div>
<div class="center-line" style="margin-top: 15vh;">
<!-- logo -->
<div class="logo">
<div class="center-justify" style="height: 80px; width: 300px;">
<img style="margin-right: 20px;" src="@/assets/logo.png">
<img src="@/assets/logotext.png">
</div>
</div>
<div class="from-input">
<el-form label-position="left" label-width="100px" :model="formData">
<!-- From -->
<div class="from">
<div class="from-title center-justify">
<div>账号登陆</div>
</div>
<div class="from-input-item">
<div class="from-input-item-title center-justify">
账号：
<div class="from-input">
<el-form label-position="left" label-width="100px" :model="formData">
<div class="from-input-item1">
<img src="@/assets/password.png" alt="">
<el-input style="height: 25px;" v-model="formData.userId" placeholder="账号" clearable
@keyup.enter="onSubmit" />
</div>
<el-input style="height: 50px;" v-model="formData.userId" placeholder="请输入登录账号"
clearable />
</div>
<div class="from-input-item">
<div class="from-input-item-title center-justify">
密码：
<div class="from-input-item1">
<img src="@/assets/password.png" alt="">
<el-input style="height: 25px; " v-model="formData.password" type="password"
placeholder="密码" show-password @keyup.enter="onSubmit" />
</div>
<el-input style="height: 50px;" v-model="formData.password" type="password"
placeholder="请输入登录密码" show-password />
</div>
<div class="from-input-item">
<el-button style="width: 100%; height: 40px;" type="primary"
@click="onSubmit">登录</el-button>
</div>
</el-form>
<div class="from-input-item">
<el-button class="loginButton" color="#8f7ee7" type="primary"
@click="onSubmit">登录</el-button>
</div>
</el-form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -82,65 +72,72 @@
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/account';
import { getToken, setToken, setUser } from '@/utils/storage'
import { getToken, setToken, setUser, setUserPass, getUserPass } from '@/utils/storage';
import { ElLoading } from 'element-plus';
const router = useRouter();
// import { usePythonBridge } from '@/utils/pythonBridge';
// let inputValue = ref('999');
// const output = ref('');
// const { callPython, getPythonData } = usePythonBridge();
const formData = ref({
userId: '',
password: '',
})
userId: getUserPass() == null ? '' : getUserPass().userId,
password: getUserPass() == null ? '' : getUserPass().password,
});
const onSubmit = () => {
console.log('submit!')
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
});
console.log('submit!');
setUserPass(formData.value);
login({
userId: formData.value.userId,
password: formData.value.password,
}).then(res => {
console.log(res)
setToken(res.currcode)
setUser(res)
}).then((res) => {
loading.close();
setToken(res.currcode);
setUser(res);
router.push('/nav');
})
}
}).catch((err) => {
loading.close();
});
};
</script>
<style lang="less">
.main {
width: 100vw;
overflow: hidden;
.container {
display: flex;
.left {
width: 40%;
height: 100vh;
box-sizing: border-box;
background-color: #1db97d;
padding: 20px 40px;
}
box-sizing: border-box;
.right {
width: 60%;
background-color: #ffffff;
position: relative;
width: 1600px;
height: 900px;
padding: 20px 40px 20px 50px;
border-left: 3px solid #23516e;
position: relative;
/* 添加 position: relative */
overflow: hidden;
/* 防止内容溢出 */
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
/* 确保视频在内容之下 */
}
.setup {
display: flex;
color: #fff;
.setup-item {
padding: 10px 6px;
@@ -150,7 +147,7 @@ const onSubmit = () => {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
background-color: rgb(255, 255, 255);
margin-right: 5px;
}
}
@@ -161,15 +158,27 @@ const onSubmit = () => {
}
.from {
width: 420px;
height: 320px;
color: #107A4E;
background-color: #ffffff44;
border-radius: 20px;
border: 1px solid #fff;
padding: 32px;
box-sizing: border-box;
.from-title {
display: flex;
padding: 10px 0 0 0;
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 24px;
color: #107A4E;
line-height: 37px;
div {
font-size: 20px;
font-weight: 600;
border-bottom: 4px solid #1db97d;
// border-bottom: 4px solid #1db97d;
}
}
@@ -179,25 +188,53 @@ const onSubmit = () => {
.from-input-item {
display: flex;
padding: 20px 0;
padding: 8px 0;
.from-input-item-title {
color: #107A4E;
font-size: 18px;
font-weight: 500;
width: 80px;
height: 50px;
}
.loginButton {
width: 359px;
height: 50px;
background: #FFFFFF;
border-radius: 24px;
border: 1px solid #FFFFFF;
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 18px;
color: #107A4E;
line-height: 37px;
}
}
.from-input-item1 {
display: flex;
width: 359px;
height: 50px;
background: rgba(147, 174, 158, 0.37);
border-radius: 24px;
border: 1px solid #FFFFFF;
padding: 12px 25px 13px 25px;
box-sizing: border-box;
margin-bottom: 16px;
}
}
}
}
}
}
.center-line {
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
}
.center-justify {
@@ -209,7 +246,6 @@ const onSubmit = () => {
.center-align {
display: flex;
justify-content: space-between;
}
.center-flex {
@@ -217,4 +253,27 @@ const onSubmit = () => {
justify-content: center;
align-items: center;
}
.el-input__wrapper {
--el-input-focus-border-color: rgba(255, 255, 0, 0);
--el-menu-hover-bg-color: rgba(255, 255, 0, 0);
}
</style>
<style scoped>
::v-deep(.el-input__wrapper) {
background-color: rgba(255, 0, 0, 0);
box-shadow: none;
}
::v-deep(.el-input__inner) {
color: #107A4E;
}
::v-deep(.el-input__inner::placeholder) {
color: #107A4E;
}
</style>

86
src/views/hosts/hostsList.vue
View File

@@ -9,13 +9,22 @@
<el-date-picker v-model="searchForm.time" type="date" value-format="YYYYMMDD" placeholder="选择查询时间" size="large"
style="margin-left: 50px;" />
<el-button style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
<el-button class="serch-button" style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
</div>
<div class="hostTable center-justify">
<el-table size="small" :data="tableData" stripe>
<el-table-column prop="hostId" label="主播id" width="200" />
<el-table-column prop="hostName" label="主播名字" min-width="200" />
<el-table size="small" :data="tableData" stripe v-loading="loading">
<el-table-column prop="hostId" label="主播id" width="200">
<template #default="scope">
<div class="hostIdText" @click="openHTML(scope.row.hostId)"> {{ scope.row.hostId }}</div>
</template>
</el-table-column>
<el-table-column prop="hostName" label="主播名字" min-width="200">
<template #default="scope">
{{ scope.row.hostName }}
</template>
</el-table-column>
<el-table-column v-for="label in labelList" :key="label.paramCode" :prop="label.paramCode"
:label="label.paramCodeMeaning" width="120">
@@ -27,8 +36,8 @@
:title="label.paramCodeMeaning" :id="scope.row.hostId" :dataType="label.paramCode"></component>
</div>
<template #reference>
<span @mouseover="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = true"
@mouseout="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = false">
<span @mouseover="openPopover(scope.row.hostId, label.paramCode)"
@mouseout="closePopover(scope.row.hostId, label.paramCode)">
{{ scope.row[label.paramCode] }}
</span>
</template>
@@ -41,7 +50,8 @@
</div>
<template #reference>
<!-- 鼠标移入时开启 -->
<span @mouseover="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = true">
<span @mouseover="openPopover(scope.row.hostId, label.paramCode)"
@mouseout="closePopover(scope.row.hostId, label.paramCode)">
{{ scope.row[label.paramCode] }}
</span>
</template>
@@ -49,13 +59,13 @@
</template>
</el-table-column>
<el-table-column label="操作">
<!-- <el-table-column label="操作">
<template #default="scope">
<div style="display: flex; align-items: center">
<el-button type="primary" @click="getTkhostdetail(scope.row.hostId)">查看</el-button>
</div>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
</div>
<div class="center-justify" style="margin-top: 30px;">
@@ -67,11 +77,15 @@
</template>
<script setup>
import { getToken, setToken, removeToken } from '@/utils/storage'
// import { getToken, setToken, removeToken } from '@/utils/storage'
import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
import { usePythonBridge, } from '@/utils/pythonBridge'
import { ref, reactive, onMounted } from 'vue';
import EChartsComponent from '@/components/EChartsComponent.vue';
const loading = ref(false)
//py方法
const { givePyAnchorId } = usePythonBridge();
let labelList = ref([])
const tableData = ref([])
@@ -117,18 +131,19 @@ function serch() {
console.log("page.value", page.value)
console.log("searchForm.value.country", searchForm.value.country)
console.log("time.value", searchForm.value.time)
getdictionary();
getlist();
}
//获取主播列表
const getlist = () => {
loading.value = true
tkhostdata({
searchTime: searchForm.value.time,
region: searchForm.value.country,
pageSize: pageSize.value,
page: page.value
}).then(res => {
loading.value = false
total.value = res.total
tableData.value = []
res.records.forEach(item => {
@@ -170,6 +185,24 @@ const getTkhostdetail = (id) => {
}
function openPopover(hostId, paramCode) {
isPopoverVisible[`${hostId}-${paramCode}`] = true;
}
function closePopover(hostId, paramCode) {
// isPopoverVisible[`${hostId}-${paramCode}`] = false;
}
function openHTML(id) {
givePyAnchorId(id)
}
</script>
<style lang="less">
@@ -182,6 +215,19 @@ const getTkhostdetail = (id) => {
.hostTable {
width: 100%;
padding: 40px 0;
.hostIdText {
text-decoration: underline;
cursor: pointer;
color: #0f0092;
}
}
.serch-button {
width: 80px;
height: 47px;
background: #E7CA92;
border-radius: 10px;
}
}
@@ -209,4 +255,22 @@ const getTkhostdetail = (id) => {
justify-content: center;
align-items: center;
}
</style>
<style scoped>
::v-deep(.el-input__wrapper) {
background-color: #F2FAF9;
border: 1px solid #B7CEC5;
height: 48px;
}
::v-deep(.el-select__wrapper) {
background-color: #F2FAF9;
border: 1px solid #B7CEC5;
height: 48px;
}
::v-deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #338F6A;
}
</style>

529
src/views/hosts/workbenches.vue
View File

@@ -1,98 +1,270 @@
<template>
<div class="container">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>工作台 </span>
</div>
</template>
<el-row :gutter="20">
<el-col :span="8">
<div class="input-group">
<label>设置金币数量</label>
<el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
placeholder="最小值" style="width: 100%">
<template #prepend>最小金币数</template>
</el-input>
<el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
placeholder="最大值" style="width: 100%; margin-top: 10px"> <template #prepend>最大金币数</template>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="input-group">
<label>设置粉丝数量</label>
<el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
placeholder="最小值" style="width: 100%">
<template #prepend>最小粉丝数</template>
</el-input>
<el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
placeholder="最大值" style="width: 100%; margin-top: 10px">
<template #prepend>最大粉丝数</template>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="input-group">
<label>后台查询频率</label>
<el-input type='number' v-model="pyData.frequency.min" :min="0" :max="pyData.frequency.max - 1"
placeholder="次/小时" style="width: 100%">
<template #append>次/小时</template>
</el-input>
<el-input type='number' v-model="pyData.frequency.max" :min="pyData.frequency.min + 1"
:max="100" placeholder="次/24小时" style="width: 100%; margin-top: 10px">
<template #append>次/24小时</template>
</el-input>
</div>
</el-col>
</el-row>
<div style="margin-top: 20px; text-align: center">
<el-button v-show="pyData.isStart" type="primary" @click="submit">开始获取数据</el-button>
<el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">停止获取</el-button>
<el-button @click="reset">重置数据</el-button>
<div class="center-line workbenches">
<div class="center-align" style="width: 100%; margin: 0 20px;">
<div class="box-card-num1 center-line">
<div>总数量: <span>{{ hostData.totalCount }}</span></div>
<div>有效主播: <span>{{ hostData.validAnchorsCount }}</span></div>
<div> 已查询: <span>{{ hostData.checkedDataCount }}</span></div>
<div>可邀请: <span>{{ hostData.canInvitationCount }}</span></div>
</div>
</el-card>
<div class="center-line" style="padding-top: 15vh;">
<el-button class="open-login" type="primary" @click="openTK">开启tk</el-button>
</div>
<div>
<el-card class="box-card-num center-justify" v-for="(item, index) in 2" :key="index">
<div class="center-justify">
<div class="from-input-item">
<div class="from-input-item-title center-justify">
公会账号：
</div>
<el-input :disabled="!(isTk || tkData[index].code == 1)" v-model="tkData[index].account"
style="height: 50px;" placeholder="请输入登录账号" clearable />
</div>
<div class="from-input-item">
<div class="from-input-item-title center-justify">
公会密码：
</div>
<el-input :disabled="!(isTk || tkData[index].code == 1)" v-model="tkData[index].password"
style="height: 50px;" type="password" placeholder="请输入登录密码" show-password />
</div>
<el-button class="open-login" style="margin-left: 60px;"
:disabled="!(isTk || tkData[index].code == 1)" type="primary"
@click="loginTK(index)">登录tk</el-button>
<div v-if="tkData[index].code == 0" class="loginState" style="background-color: red;"></div>
<div v-else class="loginState" style="background-color: green;"></div>
</div>
</el-card>
</div>
</div>
<div class="container ">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span class="center-justify"><img src="@/assets/worklogo.png">工作台 </span>
<div>当前网络:{{ countryData }}
<!-- <el-button class="reset-button" @click="reset">重置数据</el-button> -->
</div>
</div>
</template>
<el-row :gutter="20">
<el-col :span="8">
<div class="input-group">
<label>设置金币数量</label>
<el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
placeholder="最小值" style="width: 100%" :disabled="!pyData.isStart">
<template #prepend>最小金币数</template>
</el-input>
<el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
placeholder="最大值" style="width: 100%; margin-top: 10px" :disabled="!pyData.isStart">
<template #prepend>最大金币数</template>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="input-group">
<label>设置粉丝数量</label>
<el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
placeholder="最小值" style="width: 100%" :disabled="!pyData.isStart">
<template #prepend>最小粉丝数</template>
</el-input>
<el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
placeholder="最大值" style="width: 100%; margin-top: 10px" :disabled="!pyData.isStart">
<template #prepend>最大粉丝数</template>
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="input-group">
<label>后台查询频率</label>
<el-input type='number' v-model="pyData.frequency.hour" :min="0"
:max="pyData.frequency.day - 1" placeholder="次/小时" style="width: 100%"
:disabled="!pyData.isStart">
<template #append>次/小时</template>
</el-input>
<el-input type='number' v-model="pyData.frequency.day" :min="pyData.frequency.hour + 1"
:max="100" placeholder="次/24小时" style="width: 100%; margin-top: 10px"
:disabled="!pyData.isStart">
<template #append>次/24小时</template>
</el-input>
</div>
</el-col>
</el-row>
<div style="margin-top: 20px; text-align: center">
<el-button class="submit-button" :disabled="submitting" v-show="pyData.isStart" type="primary"
@click="submit">开始获取数据</el-button>
<el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">停止获取</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { usePythonBridge } from '@/utils/pythonBridge'
import { setNumData, getNumData } from '@/utils/storage'
import { ElMessage } from 'element-plus'
// import { useIPCountry } from '@/utils/useIPCountry';
import { usePythonBridge, } from '@/utils/pythonBridge'
import { setNumData, getNumData, getUser } from '@/utils/storage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCountryName } from '@/utils/countryUtil'
//导入python交互方法
const { fetchDataConfig, fetchDataCount, loginBackStage, loginTikTok } = usePythonBridge();
const { fetchDataConfig } = usePythonBridge();
//ip国家
let countryData = ref('');
//获取主播数量的定时器
let getHostTimer = ref(null);
//获取的主播信息
let hostData = ref({
totalCount: 0,
validAnchorsCount: 0,
canInvitationCount: 0,
checkedDataCount: 0,
});
//是否开启tk
let isTk = ref(false);
//tk账号信息
let tkData = ref([
{
account: '',
password: '',
index: 1,
code: 0,
},
{
account: '',
password: '',
index: 2,
code: 0,
},
]);
//python需要的数据
let pyData = ref({
gold: { min: 0, max: 0 },
fans: { min: 0, max: 0 },
frequency: { min: 0, max: 0 },
frequency: { hour: 0, day: 0 },
isStart: true,
country: 'CN'
country: countryData.value,
test: '123',
test1: { test: 123, test12: 123 },
tenantId: getUser().tenantId,
userId: getUser().userId,
});
//按钮提交状态
let submitting = ref(false);
onMounted(() => {
//从缓存获取数据
if (getNumData()) {
pyData.value = getNumData();
}
getIpInfo()
})
const getIpInfo = async () => {
try {
const response = await fetch('https://ipapi.co/json/');
if (!response.ok) {
throw new Error('请求失败');
}
const data = await response.json();
console.log('IP信息:', data.country);
countryData.value = getCountryName(data.country);
} catch (error) {
console.error('请求出错:', error);
}
};
//提交数据到py
const submit = () => {
// console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);
pyData.value.country = countryData.value;
console.log('提交的区间值：', pyData.value);
ElMessageBox.confirm(
'确认开始爬取数据?',
'开始',
{
confirmButtonText: '开始',
cancelButtonText: '取消',
type: 'success',
}
)
.then(() => {
// console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);
//开始按钮的状态 改为禁用
submitting.value = true;
setNumData(pyData.value);
console.error('提交的区间值：', JSON.stringify(pyData.value));
fetchDataConfig(JSON.stringify({
gold: pyData.value.gold,
fans: pyData.value.fans,
frequency: pyData.value.frequency,
isStart: true,
country: countryData.value,
tenantId: getUser().tenantId,
userId: getUser().userId,
})).then((res) => {
getHostTimer.value = setInterval(() => {
fetchDataCount().then((res) => {
hostData.value = JSON.parse(res);
})
}, 1000);
}).finally(() => {
setTimeout(() => {
pyData.value.isStart = false;
submitting.value = false;
}, 2000)
})
})
.catch(() => {
})
setNumData(pyData.value);
fetchDataConfig(JSON.stringify(pyData.value)).then((res) => {
ElMessage.sussec('提交成功')
pyData.value.isStart = false;
}).catch((err) => {
ElMessage.error('提交失败')
})
};
//停止
const unsubmit = () => {
fetchDataConfig(JSON.stringify(pyData.value)).then((res) => {
fetchDataConfig(JSON.stringify({
gold: pyData.value.gold,
fans: pyData.value.fans,
frequency: pyData.value.frequency,
isStart: false,
country: countryData.value,
tenantId: getUser().tenantId,
userId: getUser().userId,
})).then((res) => {
pyData.value.isStart = true;
alert('已停止' + res);
clearInterval(getHostTimer.value);
getHostTimer.value = null;
// ElMessage.sussec('已停止')
}).catch((err) => {
alert('停止失败', err);
// ElMessage.error('停止失败')
})
};
@@ -100,37 +272,144 @@ const unsubmit = () => {
const reset = () => {
pyData.value.gold = { min: 0, max: 0 };
pyData.value.fans = { min: 0, max: 0 };
pyData.value.frequency = { min: 0, max: 0 };
pyData.value.frequency = { hour: 0, day: 0 };
};
onMounted(() => {
console.log(getNumData())
if (getNumData()) {
pyData.value = getNumData();
}
const loginTK = (index) => {
loginBackStage(JSON.stringify({
account: tkData.value[index].account,
password: tkData.value[index].password,
index: index
})).then((res) => {
// let data = JSON.parse(res);
// if (data.code == 1) {
// tkData.value[data.index].code = 1;
// }
}).catch((err) => {
})
})
}
const openTK = () => {
isTk.value = true;
console.log(isTk.value)
loginTikTok();
}
function jszhuru() {
isTk.value = true;
tkData[index].code = 1;
}
</script>
<style scoped>
<style scoped lang="less">
.container {
margin: 0 auto;
padding: 20px;
}
.workbenches {
padding: 45px 29px 22px 27px
}
.box-card {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// width: 1240px;
height: 436px;
background: #FFFFFF;
box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
border-radius: 24px;
}
.box-card-num1 {
width: 197px;
height: 321px;
background: #FFFFFF;
box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
border-radius: 24px;
padding-top: 60px;
box-sizing: border-box;
div {
height: 20%;
display: flex;
justify-content: space-around;
align-items: center;
color: #8D8E8E;
span {
color: #000;
padding-left: 10px;
}
}
}
.box-card-num {
width: 897px;
height: 145px;
background: #FFFFFF;
box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
border-radius: 24px;
margin-bottom: 30px;
}
.from-input-item {
display: flex;
.from-input-item-title {
color: #000000;
font-size: 14px;
font-weight: 500;
width: 100px;
height: 50px;
}
.loginButton {
width: 100%;
height: 40px;
color: #ffffff;
font-size: 16px;
}
}
.loginState {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
margin-left: 15px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
span {
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 20px;
color: #2D2727;
line-height: 37px;
img {
margin-right: 16px;
}
}
}
.input-group {
margin-bottom: 20px;
.el-input {
margin: 22px 0;
}
}
label {
@@ -139,4 +418,94 @@ label {
font-weight: bold;
color: #606266;
}
.open-login {
width: 100px;
height: 47px;
background: #E7CA92;
border-radius: 10px;
}
.reset-button {
width: 132px;
height: 47px;
background: #E7CA92;
border-radius: 10px;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
margin-left: 50px;
}
.submit-button {
width: 160px;
height: 47px;
background: #338F6A;
border-radius: 10px;
}
.center-line {
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
}
.center-justify {
display: flex;
justify-content: space-around;
align-items: center;
}
.center-align {
display: flex;
justify-content: space-between;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<style scoped>
::v-deep(.el-input-group__prepend) {
background: #84CEB2;
border-radius: 10px 0px 0px 10px;
border: 1px solid #B7CEC5;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
line-height: 37px;
}
::v-deep(.el-input-group__append) {
background: #84CEB2;
border-radius: 0px 10px 10px 0px;
border: 1px solid #B7CEC5;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
line-height: 37px;
}
::v-deep(.el-input__wrapper) {
width: 218px;
}
.el-input {
width: 200px;
height: 48px;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #B7CEC5;
}
</style>

26
src/views/nav.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<Sidebar />
<div class="content">
<div class="content ">
<RouterView />
</div>
</div>
@@ -23,21 +23,31 @@ html {
.app-container {
display: flex;
height: 100vh;
width: 1600px;
height: 900px;
background-color: #338F6A;
}
.sidebar {
width: 200px;
background-color: #f5f5f5;
background-color: #338F6A;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
/* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
}
.content {
width: calc(100% - 200px);
margin-left: 200px;
padding: 20px;
margin-left: 280px;
width: 1304px;
height: 868px;
background: #FFFFFF;
border-radius: 36px;
margin-top: 16px;
}
.center-justify {
display: flex;
justify-content: space-around;
align-items: center;
}
</style>