101 lines
3.6 KiB
Vue
101 lines
3.6 KiB
Vue
|
<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="range1.min" :min="0" :max="range1.max - 1" placeholder="最小值"
|
||
|
|
style="width: 100%">
|
||
|
|
<template #prepend>最小金币数</template>
|
||
|
|
</el-input>
|
||
|
|
<el-input type='number' v-model="range1.max" :min="range1.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="range2.min" :min="0" :max="range2.max - 1" placeholder="最小值"
|
||
|
|
style="width: 100%">
|
||
|
|
<template #prepend>最小粉丝数</template>
|
||
|
|
</el-input>
|
||
|
|
<el-input type='number' v-model="range2.max" :min="range2.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="range3.min" :min="0" :max="range3.max - 1" placeholder="次/小时"
|
||
|
|
style="width: 100%">
|
||
|
|
<template #append>次/小时</template>
|
||
|
|
</el-input>
|
||
|
|
<el-input type='number' v-model="range3.max" :min="range3.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 type="primary" @click="submit">开始获取数据</el-button>
|
||
|
|
<el-button @click="reset">重置数据</el-button>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue';
|
||
|
|
|
||
|
|
const range1 = ref({ min: 0, max: 0 });
|
||
|
|
const range2 = ref({ min: 0, max: 0 });
|
||
|
|
const range3 = ref({ min: 0, max: 0 });
|
||
|
|
|
||
|
|
const submit = () => {
|
||
|
|
console.log('提交的区间值：', range1.value, range2.value, range3.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const reset = () => {
|
||
|
|
range1.value = { min: 0, max: 0 };
|
||
|
|
range2.value = { min: 0, max: 0 };
|
||
|
|
range3.value = { min: 0, max: 0 };
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-card {
|
||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-group {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #606266;
|
||
|
|
}
|
||
|
|
</style>
|