123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797 |
- <template>
- <div class="app-container">
- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
- <el-form-item label="企微账号" prop="qwUserId">
- <el-select v-model="queryParams.qwUserId" placeholder="企微账号" clearable size="small" @change="updateQwuser()">
- <el-option
- v-for="dict in myQwUserList"
- :key="dict.dictValue"
- :label="dict.dictLabel + '('+dict.corpName+')'"
- :value="dict.dictValue"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="客户ID" prop="qwExternalContactId">
- <el-input
- v-model="queryParams.qwExternalContactId"
- placeholder="请输入会员ID"
- clearable
- size="small"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="会员ID" prop="userId">
- <el-input
- v-model="queryParams.userId"
- placeholder="请输入会员ID"
- clearable
- size="small"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="会员昵称" prop="nickName">
- <el-input
- v-model="queryParams.nickName"
- placeholder="请输入会员昵称"
- clearable
- size="small"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="企微客户昵称" prop="nickName">
- <el-input
- v-model="queryParams.externalUserName"
- placeholder="请输入企微客户昵称"
- clearable
- size="small"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item label="课程" prop="courseId">
- <el-select filterable v-model="queryParams.courseId" placeholder="请选择课程" clearable size="small" @change="courseChange(queryParams.courseId)">
- <el-option
- v-for="dict in courseLists"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="小节" prop="videoId">
- <el-select filterable v-model="queryParams.videoId" placeholder="请选择小节" clearable size="small">
- <el-option
- v-for="dict in videoList"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="创建时间" prop="createTime">
- <el-date-picker v-model="createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"></el-date-picker>
- </el-form-item>
- <el-table-column label="完课时间" align="center" prop="finishTime" />
- <el-table-column label="营期时间" align="center" prop="campPeriodTime" />
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button
- type="warning"
- plain
- icon="el-icon-download"
- size="mini"
- :loading="exportLoading"
- @click="handleExport"
- v-hasPermi="['course:courseWatchLog:myExport']"
- >导出</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="primary"
- plain
- size="mini"
- @click="addUserTag"
- v-hasPermi="['qw:externalContact:addTag']"
- >批量添加标签</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button
- type="primary"
- plain
- size="mini"
- @click="delUserTag"
- v-hasPermi="['qw:externalContact:delTag']"
- >批量移除标签</el-button>
- </el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
- <el-tabs type="card" v-model="queryParams.logType" @tab-click="handleClickX">
- <el-tab-pane label="全部" name="10"></el-tab-pane>
- <el-tab-pane v-for="(item,index) in logTypeOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
- </el-tabs>
- <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
- <el-table-column label="记录编号" align="center" prop="logId" />
- <el-table-column label="企微客户" align="center" prop="externalUserName"/>
- <el-table-column label="会员ID" align="center" prop="userId" />
- <el-table-column label="会员昵称" align="center" prop="fsNickName">
- <template slot-scope="scope">
- <div style="display: flex;white-space: nowrap">
- <div style="margin: auto">
- {{scope.row.fsNickName}}
- </div>
- <el-popover
- placement="right"
- title=""
- trigger="hover">
- <img slot="reference" :src="scope.row.fsAvatar" style="width: 30px;height: 30px">
- <img :src="scope.row.fsAvatar" style="max-width: 200px;max-height: 200px">
- </el-popover>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="课程名称" align="center" prop="courseName" />
- <el-table-column label="小节名称" align="center" prop="videoName" />
- <el-table-column label="记录类型" align="center" prop="logType">
- <template slot-scope="scope">
- <dict-tag :options="logTypeOptions" :value="scope.row.logType"/>
- </template>
- </el-table-column>
- <el-table-column label="播放时长" align="center" prop="duration" />
- <el-table-column label="所属销售" align="center" prop="companyUserName" />
- <el-table-column label="所属公司" align="center" prop="companyName" />
- <el-table-column label="企微员工名称" align="center" prop="qwUserName" />
- <el-table-column label="企微账号" align="center" prop="qwUserName" />
- <el-table-column label="所属发送方式" align="center" prop="sendType" />
- <el-table-column label="创建时间" align="center" prop="createTime" />
- <!-- <el-table-column label="更新时间" align="center" prop="updateTime" />-->
- <el-table-column label="完课时间" align="center" prop="lastHeartbeatTime" />
- </el-table>
- <pagination
- v-show="total>0"
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getList"
- />
- <el-dialog title="批量添加标签" :visible.sync="tagOpen" width="800px" append-to-body>
- <div>搜索标签:
- <el-input v-model="tagChange.tagName" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(tagChange.tagName)">搜索</el-button>
- <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
- </div>
- <el-form ref="form" :model="addTagFormByWatch" label-width="80px">
- <div v-for="item in tagGroupList" :key="item.id" >
- <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
- <span class="name-background">{{ item.name }}</span>
- </div>
- <!-- 添加外层滚动容器 -->
- <div class="scroll-wrapper">
- <div class="tag-container">
- <a
- v-for="tagItem in item.tag"
- class="tag-box"
- @click="tagSelection(tagItem)"
- :class="{ 'tag-selected': tagItem.isSelected }"
- >
- {{ tagItem.name }}
- </a>
- </div>
- </div>
- </div>
- </el-form>
- <pagination
- v-show="tagTotal>0"
- :total="tagTotal"
- :page.sync="queryTagParams.pageNum"
- :limit.sync="queryTagParams.pageSize"
- @pagination="getPageListTagGroup"
- />
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="addTagSubmitForm()">确 定</el-button>
- <el-button @click="addTagCancel">取 消</el-button>
- </div>
- </el-dialog>
- <el-dialog title="批量移除标签" :visible.sync="tagDelOpen" width="800px" append-to-body>
- <div>搜索标签:
- <el-input v-model="tagChange.tagName" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(tagChange.tagName)">搜索</el-button>
- <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
- </div>
- <el-form ref="form" :model="addTagFormByWatch" label-width="80px">
- <div v-for="item in tagGroupList" :key="item.id" >
- <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
- <span class="name-background">{{ item.name }}</span>
- </div>
- <!-- 添加外层滚动容器 -->
- <div class="scroll-wrapper">
- <div class="tag-container">
- <a
- v-for="tagItem in item.tag"
- class="tag-box"
- @click="tagSelection(tagItem)"
- :class="{ 'tag-selected': tagItem.isSelected }"
- >
- {{ tagItem.name }}
- </a>
- </div>
- </div>
- </div>
- </el-form>
- <pagination
- v-show="tagTotal>0"
- :total="tagTotal"
- :page.sync="queryTagParams.pageNum"
- :limit.sync="queryTagParams.pageSize"
- @pagination="getPageListTagGroup"
- />
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="tagDelSubmitForm()">确 定</el-button>
- <el-button @click="DelTagCancel">取 消</el-button>
- </div>
- </el-dialog>
- <el-dialog
- :title="resultTitle"
- :visible.sync="resultDialogVisible"
- width="50%"
- custom-class="feedback-dialog"
- >
- <pre style="white-space: pre-wrap; font-family: inherit;">{{ resultMessage }}</pre>
- <span slot="footer" class="dialog-footer">
- <el-button @click="resultDialogVisible = false">关闭</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import { myListCourseWatchLog, getCourseWatchLog, delCourseWatchLog, addCourseWatchLog, updateCourseWatchLog, exportCourseWatchLog } from "@/api/course/courseWatchLog";
- import { courseList,videoList } from '@/api/course/courseRedPacketLog'
- import {getMyQwUserList} from "@/api/qw/user";
- import {allListTagGroup} from "../../../api/qw/tagGroup";
- import {searchTags} from "../../../api/qw/tag";
- import {addTagByWatch, delTagByWatch} from "../../../api/qw/externalContact";
- export default {
- name: "CourseWatchLog",
- data() {
- return {
- resultDialogVisible: false,
- resultMessage: '',
- resultTitle:'',
- createTime:null,
- courseLists:[],
- videoList:[],
- myQwUserList:[],
- logTypeOptions:[],
- // 遮罩层
- loading: true,
- // 导出遮罩层
- exportLoading: false,
- // 选中数组
- ids: [],
- // 非单个禁用
- single: true,
- // 非多个禁用
- multiple: true,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 短链课程看课记录表格数据
- courseWatchLogList: [],
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- tagOpen:false,
- //标签弹窗选择
- tagChange:{
- open:false,
- index:null,
- },
- addTagFormByWatch:{
- logId:[],
- tagIds:[]
- },
- tagGroupList: [],
- tagTotal:0,
- tagDelOpen:false,
- queryTagParams:{
- pageNum: 1,
- pageSize: 5,
- total:0,
- name:null,
- corpId:null,
- },
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- userId: null,
- videoId: null,
- nickName:null,
- logType: "10",
- qwExternalContactId: null,
- externalUserName:null,
- duration: null,
- qwUserId: null,
- companyUserId: null,
- companyId: null,
- courseId: null,
- sTime:null,
- eTime:null,
- scheduleStartTime: null,
- scheduleEndTime: null,
- },
- // 表单参数
- form: {},
- // 表单校验
- rules: {
- }
- };
- },
- created() {
- courseList().then(response => {
- this.courseLists = response.list;
- });
- this.getList();
- this.getDicts("sys_course_watch_log_type").then(response => {
- this.logTypeOptions = response.data;
- });
- getMyQwUserList().then(response => {
- this.myQwUserList = response.data;
- });
- },
- methods: {
- courseChange(row){
- this.queryParams.videoId=null;
- if(row === ''){
- this.videoList=[];
- return
- }
- videoList(row).then(response => {
- this.videoList=response.list
- });
- },
- updateQwuser(){
- for (const user of this.myQwUserList) {
- if (user.dictValue == this.queryParams.qwUserId) {
- this.queryParams.corpId=user.corpId;
- break;
- }
- }
- this.getList();
- },
- change() {
- if (this.createTime != null) {
- this.queryParams.sTime = this.createTime[0];
- this.queryParams.eTime = this.createTime[1];
- } else {
- this.queryParams.sTime = null;
- this.queryParams.eTime = null;
- }
- },
- handleClickX(tab){
- if(tab.name==="10"){
- this.queryParams.logType=null;
- }else{
- this.queryParams.logType=tab.name;
- }
- this.getList()
- },
- /** 查询短链课程看课记录列表 */
- getList() {
- this.loading = true;
- myListCourseWatchLog(this.queryParams).then(response => {
- this.courseWatchLogList = response.rows;
- this.total = response.total;
- this.loading = false;
- });
- },
- // 取消按钮
- cancel() {
- this.open = false;
- this.reset();
- },
- // 表单重置
- reset() {
- this.form = {
- logId: null,
- userId: null,
- videoId: null,
- logType: null,
- createTime: null,
- updateTime: null,
- qwExternalContactId: null,
- externalUserName:null,
- duration: null,
- qwUserId: null,
- companyUserId: null,
- companyId: null,
- courseId: null,
- scheduleStartTime: null,
- scheduleEndTime: null,
- };
- this.scheduleTime=null;
- this.resetForm("form");
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getList();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.resetForm("queryForm");
- this.createTime = null;
- this.queryParams.sTime = null;
- this.queryParams.eTime = null;
- this.queryParams.scheduleStartTime = null;
- this.queryParams.scheduleEndTime = null;
- this.scheduleTime=null;
- this.handleQuery();
- },
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.ids = selection.map(item => item.logId)
- this.single = selection.length!==1
- this.multiple = !selection.length
- },
- /** 新增按钮操作 */
- handleAdd() {
- this.reset();
- this.open = true;
- this.title = "添加短链课程看课记录";
- },
- /** 修改按钮操作 */
- handleUpdate(row) {
- this.reset();
- const logId = row.logId || this.ids
- getCourseWatchLog(logId).then(response => {
- this.form = response.data;
- this.open = true;
- this.title = "修改短链课程看课记录";
- });
- },
- /** 提交按钮 */
- submitForm() {
- this.$refs["form"].validate(valid => {
- if (valid) {
- if (this.form.logId != null) {
- updateCourseWatchLog(this.form).then(response => {
- this.msgSuccess("修改成功");
- this.open = false;
- this.getList();
- });
- } else {
- addCourseWatchLog(this.form).then(response => {
- this.msgSuccess("新增成功");
- this.open = false;
- this.getList();
- });
- }
- }
- });
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- const logIds = row.logId || this.ids;
- this.$confirm('是否确认删除短链课程看课记录编号为"' + logIds + '"的数据项?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return delCourseWatchLog(logIds);
- }).then(() => {
- this.getList();
- this.msgSuccess("删除成功");
- }).catch(() => {});
- },
- /** 导出按钮操作 */
- handleExport() {
- const queryParams = this.queryParams;
- this.$confirm('是否确认导出所有短链课程看课记录数据项?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(() => {
- this.exportLoading = true;
- return exportCourseWatchLog(queryParams);
- }).then(response => {
- this.download(response.msg);
- this.exportLoading = false;
- }).catch(() => {});
- },
- addUserTag(){
- if(this.ids==null||this.ids==""){
- return this.$message('请选择需要添加标签的客户');
- }
- this.getPageListTagGroup();
- setTimeout(() => {
- for (let i = 0; i < this.tagGroupList.length; i++) {
- for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
- this.tagGroupList[i].tag[x].isSelected=false;
- }
- }
- }, 200);
- this.tagOpen = true;
- },
- delUserTag(){
- if(this.ids==null||this.ids==""){
- return this.$message('请选择需要移除标签的客户');
- }
- this.getPageListTagGroup();
- setTimeout(() => {
- for (let i = 0; i < this.tagGroupList.length; i++) {
- for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
- this.tagGroupList[i].tag[x].isSelected=false;
- }
- }
- }, 200);
- this.tagDelOpen = true;
- },
- getPageListTagGroup(){
- this.queryTagParams.corpId=this.queryParams.corpId
- allListTagGroup(this.queryTagParams).then(response => {
- this.tagGroupList = response.rows;
- this.tagTotal = response.total;
- });
- },
- tagSelection(row){
- row.isSelected= !row.isSelected;
- this.$forceUpdate();
- },
- handleSearchTags(name){
- if (!name){
- return this.$message.error("请输入要搜索的标签")
- }
- this.queryTagParams.name=name;
- this.queryTagParams.corpId=this.queryParams.corpId;
- searchTags(this.queryTagParams).then(response => {
- this.tagGroupList = response.rows;
- });
- // searchTags({name:name,corpId:this.queryParams.corpId}).then(response => {
- // this.tagGroupList = response.rows;
- // });
- },
- cancelSearchTags(){
- this.resetSearchQueryTag()
- this.getPageListTagGroup();
- },
- resetSearchQueryTag(){
- this.queryTagParams= {
- pageNum: 1,
- pageSize: 5,
- total:0,
- name:null,
- };
- },
- addTagSubmitForm(){
- for (let i = 0; i < this.tagGroupList.length; i++) {
- for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
- if(this.tagGroupList[i].tag[x].isSelected==true){
- this.addTagFormByWatch.tagIds.push(this.tagGroupList[i].tag[x].tagId)
- }
- }
- }
- if(this.addTagFormByWatch.tagIds==[]||this.addTagFormByWatch.tagIds==null||this.addTagFormByWatch.tagIds==""){
- return this.$message('请选择标签');
- }
- this.addTagFormByWatch.logIds=this.ids;
- let loadingRock = this.$loading({
- lock: true,
- text: '正在执行中请稍后~~请不要刷新页面!!',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- addTagByWatch(this.addTagFormByWatch).then(response => {
- // this.msgSuccess(response.msg);
- this.resultMessage = response.msg;
- this.resultDialogVisible = true; // 显示弹窗
- this.resultTitle = '批量添加标签结果';
- this.tagOpen = false;
- loadingRock.close();
- this.addTagFormByWatch={
- logIds:[],
- tagIds:[]
- };
- this.getList()
- }).finally(res=>{
- loadingRock.close();
- });
- },
- tagDelSubmitForm(){
- for (let i = 0; i < this.tagGroupList.length; i++) {
- for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
- if(this.tagGroupList[i].tag[x].isSelected==true){
- this.addTagFormByWatch.tagIds.push(this.tagGroupList[i].tag[x].tagId)
- }
- }
- }
- if(this.addTagFormByWatch.tagIds==[]||this.addTagFormByWatch.tagIds==null||this.addTagFormByWatch.tagIds==""){
- return this.$message('请选择标签');
- }
- this.addTagFormByWatch.corpId=this.queryParams.corpId
- this.addTagFormByWatch.logIds=this.ids;
- let loadingRock = this.$loading({
- lock: true,
- text: '正在执行中请稍后~~请不要刷新页面!!',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- delTagByWatch(this.addTagFormByWatch).then(response => {
- // this.msgSuccess(response.msg);
- this.resultMessage = response.msg;
- this.resultDialogVisible = true; // 显示弹窗
- this.resultTitle = '批量移除标签结果';
- this.tagDelOpen = false;
- loadingRock.close();
- this.addTagFormByWatch={
- userIds:[],
- tagIds:[]
- };
- this.getList()
- }).finally(res=>{
- loadingRock.close();
- });
- },
- addTagCancel() {
- this.tagOpen = false;
- this.addTagFormByWatch={
- logIds:[],
- tagIds:[]
- };
- },
- DelTagCancel() {
- this.tagDelOpen = false;
- this.addTagFormByWatch={
- logIds:[],
- tagIds:[]
- };
- },
- }
- };
- </script>
- <style scoped>
- /* CSS 样式 */
- .tag-container {
- display: flex;
- flex-wrap: wrap; /* 超出宽度时自动换行 */
- gap: 8px; /* 设置标签之间的间距 */
- }
- .name-background {
- display: inline-block;
- background-color: #abece6; /* 背景颜色 */
- padding: 4px 8px; /* 调整内边距,让背景包裹文字 */
- border-radius: 4px; /* 可选:设置圆角 */
- }
- /* CSS 样式 */
- .tag-container {
- display: flex;
- flex-wrap: wrap; /* 超出宽度时自动换行 */
- gap: 8px; /* 设置标签之间的间距 */
- }
- .name-background {
- display: inline-block;
- background-color: #abece6; /* 背景颜色 */
- padding: 4px 8px; /* 调整内边距,让背景包裹文字 */
- border-radius: 4px; /* 可选:设置圆角 */
- }
- .tag-box {
- padding: 8px 12px;
- border: 1px solid #989797;
- border-radius: 4px;
- cursor: pointer;
- display: inline-block;
- }
- .tag-selected {
- background-color: #00bc98;
- color: #fff;
- border-color: #00bc98;
- }
- .el-tag + .el-tag {
- margin-left: 10px;
- }
- .button-new-tag {
- margin-left: 10px;
- height: 32px;
- line-height: 30px;
- padding-top: 0;
- padding-bottom: 0;
- }
- .input-new-tag {
- width: 90px;
- margin-left: 10px;
- vertical-align: bottom;
- }
- /* 新增的滚动容器样式(不影响原有样式) */
- .scroll-wrapper {
- max-height: 130px; /* 大约三行的高度 */
- overflow-y: auto; /* 垂直滚动 */
- padding-right: 5px; /* 为滚动条留出空间 */
- }
- /* 美化滚动条(可选) */
- .scroll-wrapper::-webkit-scrollbar {
- width: 6px;
- }
- .scroll-wrapper::-webkit-scrollbar-thumb {
- background: rgba(0, 0, 0, 0.2);
- border-radius: 3px;
- }
- </style>
|