parent
d26a7e0ec4
commit
a37a7c23e4
@ -1,242 +1,207 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%@ page isELIgnored="true" %>
|
||||
|
||||
<!-- 轮播图管理 -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>轮播图管理</title>
|
||||
<link rel="stylesheet" href="../../layui/css/layui.css">
|
||||
<!-- 样式 -->
|
||||
<link rel="stylesheet" href="../../css/style.css" />
|
||||
<!-- 主题（主要颜色设置） -->
|
||||
<link rel="stylesheet" href="../../css/theme.css" />
|
||||
<!-- 通用的css -->
|
||||
<link rel="stylesheet" href="../../css/common.css" />
|
||||
</head>
|
||||
<style>
|
||||
.layui-form .layui-form-item .layui-form-select .layui-input {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 30px;
|
||||
padding: 0 30px 0 10px;
|
||||
box-shadow: 0px 0px 0px #ccc;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
color: #666;
|
||||
width: 120px;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* lists */
|
||||
.lists .animation-box {
|
||||
transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.lists .animation-box:hover {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
-webkit-perspective: 1000px;
|
||||
perspective: 1000px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.lists img {
|
||||
transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.lists img:hover {
|
||||
-webkit-perspective: 1000px;
|
||||
perspective: 1000px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
/* lists */
|
||||
</style>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 轮播图 -->
|
||||
<div id="layui-carousel" class="layui-carousel">
|
||||
<div carousel-item>
|
||||
<div class="layui-carousel-item" v-for="(item,index) in swiperList" :key="index">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 轮播图 -->
|
||||
|
||||
<div id="breadcrumb">
|
||||
<span class="en">DATA SHOW</span>
|
||||
<span class="cn">轮播图管理展示</span>
|
||||
</div>
|
||||
|
||||
<!-- 图文列表 -->
|
||||
<div class="recommend" :style='{"padding":"0","margin":"0px auto","flexWrap":"wrap","background":"none","display":"flex","width":"100%","position":"relative"}'>
|
||||
|
||||
|
||||
<form class="layui-form filter" :style='{"padding":"30px 20px 30px","borderColor":"#bcdbdf","margin":"20px 7% 0","alignItems":"center","background":"#fff","borderWidth":"1px 0px 2px","display":"flex","width":"100%","borderStyle":"outset","justifyContent":"center","height":"auto"}'>
|
||||
|
||||
<div :style='{"alignItems":"center","margin":"0 4px 0 0","display":"flex"}' class="item-list">
|
||||
<div class="lable" :style='{"width":"auto","padding":"0 10px","lineHeight":"42px"}'>名称</div>
|
||||
<input type="text" :style='{"border":"1px solid #eee","padding":"0 10px","boxShadow":"0px 0px 0px #ccc","margin":"0","outline":"none","color":"#666","borderRadius":"30px","width":"140px","fontSize":"14px","lineHeight":"40px","height":"40px"}' name="name" id="name" placeholder="名称" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
|
||||
<button :style='{"cursor":"pointer","padding":"0px 10px","margin":"0 10px 0","borderColor":"#feabab","color":"#fff","minWidth":"90px","outline":"none","borderRadius":"30px","background":"#40a8c4","borderWidth":"0px","width":"auto","fontSize":"14px","lineHeight":"42px","borderStyle":"dashed","height":"42px"}' id="btn-search" type="button" class="layui-btn layui-btn-normal">
|
||||
<i :style='{"color":"#fff","margin":"0 10px 0 0","fontSize":"14px"}' class="layui-icon layui-icon-search"></i>搜索
|
||||
</button>
|
||||
<button :style='{"cursor":"pointer","padding":"0px 10px","margin":"0 4px 0 0","borderColor":"#fda100","color":"#fff","minWidth":"90px","outline":"none","borderRadius":"30px","background":"#f7aa00","borderWidth":"0px","width":"auto","fontSize":"14px","lineHeight":"42px","borderStyle":"solid","height":"42px"}' v-if="isAuth('config','新增')" @click="jump('../config/add.jsp')" type="button" class="layui-btn btn-theme">
|
||||
<i :style='{"color":"#fff","margin":"0 10px 0 0","fontSize":"14px"}' class="layui-icon"></i>添加
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div :style='{"padding":"40px 0 20px","margin":"40px 7% 0px","borderColor":"#f3d7ca","background":"none","flex":"1","borderWidth":"0 0px 0 0","width":"100%","minWidth":"850px","borderStyle":"solid","order":"4"}' class="lists">
|
||||
<!-- 样式二 -->
|
||||
<div :style='{"padding":"0px","flexWrap":"wrap","background":"none","display":"flex","width":"100%","justifyContent":"space-between","height":"auto"}' class="list list-2">
|
||||
<div :style='{"cursor":"pointer","padding":"10px","boxShadow":"0px 0px 0px #eee","margin":"0 0 100px","borderColor":"#ddd","display":"flex","justifyContent":"space-between","flexWrap":"wrap","background":"url(http://codegen.caihongy.cn/20230206/de4c50b5282f45f8a59707bce3185db8.png) no-repeat left bottom / 20%,url(http://codegen.caihongy.cn/20230206/5e80378b411c4449a860d66e35c5c969.png) no-repeat right top / 20%","borderWidth":"0px","width":"49%","position":"relative","borderStyle":"solid","height":"240px"}' @click="jump('../config/detail.jsp?id='+item.id)" v-for="(item,index) in dataList" :key="index" class="list-item animation-box">
|
||||
<div :style='{"padding":"10px 10px","verticalAlign":"middle","boxShadow":"inset 0px 0px 0px 0px #f5eee6","borderColor":"#f3d7ca #f3d7ca #f3d7ca","alignItems":"flex-start","display":"flex","right":"30px","justifyContent":"center","top":"60px","borderRadius":"8px","flexWrap":"wrap","borderWidth":"0px 0px 0px","background":"none","width":"44%","position":"absolute","borderStyle":"solid","height":"90%"}' class="item-info">
|
||||
<div v-if="item.price" :style='{"width":"100%","padding":"0px 4px","lineHeight":"24px","fontSize":"14px","color":"#f00","textAlign":"center"}' class="time">￥{{Number(item.price).toFixed(2)}}</div>
|
||||
<div v-if="item.vipprice&&item.vipprice>0" :style='{"width":"100%","padding":"0px 4px","lineHeight":"24px","fontSize":"14px","color":"#f00","textAlign":"center"}' class="time">￥{{Number(item.vipprice).toFixed(2)}} 会员价</div>
|
||||
<div v-if="item.jf" :style='{"width":"100%","padding":"0px 4px","lineHeight":"24px","fontSize":"14px","color":"#f00","textAlign":"center"}' class="time">{{Number(item.jf).toFixed(0)}}积分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pager" id="pager"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- layui -->
|
||||
<script src="../../layui/layui.js"></script>
|
||||
<!-- vue -->
|
||||
<script src="../../js/vue.js"></script>
|
||||
<!-- 组件配置信息 -->
|
||||
<script src="../../js/config.js"></script>
|
||||
<!-- 扩展插件配置信息 -->
|
||||
<script src="../../modules/config.js"></script>
|
||||
<!-- 工具方法 -->
|
||||
<script src="../../js/utils.js"></script>
|
||||
<script type="text/javascript" src="../../js/jquery.js"></script>
|
||||
<script>
|
||||
var vue = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
// 轮播图
|
||||
swiperList: [{
|
||||
img: '../../img/banner.jpg'
|
||||
}],
|
||||
|
||||
baseurl: '',
|
||||
dataList: []
|
||||
},
|
||||
methods: {
|
||||
isAuth(tablename, button) {
|
||||
return isFrontAuth(tablename, button)
|
||||
},
|
||||
jump(url) {
|
||||
jump(url)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
layui.use(['form', 'layer', 'element', 'carousel', 'laypage', 'http', 'jquery','laydate', 'slider'], function() {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var element = layui.element;
|
||||
var carousel = layui.carousel;
|
||||
var laypage = layui.laypage;
|
||||
var http = layui.http;
|
||||
var jquery = layui.jquery;
|
||||
var laydate = layui.laydate;
|
||||
var slider = layui.slider;
|
||||
var limit = 12;
|
||||
vue.baseurl = http.baseurl;
|
||||
// 获取轮播图 数据
|
||||
http.request('config/list', 'get', {
|
||||
page: 1,
|
||||
limit: 3
|
||||
}, function(res) {
|
||||
if (res.data.list.length > 0) {
|
||||
let swiperList = [];
|
||||
res.data.list.forEach(element => {
|
||||
if (element.value != null) {
|
||||
swiperList.push({
|
||||
img: http.baseurl+element.value
|
||||
});
|
||||
}
|
||||
});
|
||||
vue.swiperList = swiperList;
|
||||
|
||||
vue.$nextTick(() => {
|
||||
carousel.render({
|
||||
elem: '#layui-carousel',
|
||||
width: '100%',
|
||||
height: '680px',
|
||||
anim: 'default',
|
||||
autoplay: 'true',
|
||||
interval: '5000',
|
||||
arrow: 'none',
|
||||
indicator: 'inside'
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 分页列表
|
||||
pageList();
|
||||
|
||||
// 搜索按钮
|
||||
jquery('#btn-search').click(function(e) {
|
||||
pageList();
|
||||
});
|
||||
|
||||
function pageList() {
|
||||
var param = {
|
||||
page: 1,
|
||||
limit: limit
|
||||
}
|
||||
|
||||
if (jquery('#name').val()) {
|
||||
param['name'] = jquery('#name').val() ? '%' + jquery('#name').val() + '%' : '';
|
||||
}
|
||||
|
||||
|
||||
if (jquery('#name').val()) {
|
||||
param['name'] = jquery('#name').val() ? '%' + jquery('#name').val() + '%' : '';
|
||||
}
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>轮播图管理</title>
|
||||
<!-- 样式 -->
|
||||
<link rel="stylesheet" href="../../layui/css/layui.css">
|
||||
<!-- 主题（主要颜色设置） -->
|
||||
<link rel="stylesheet" href="../../css/theme.css">
|
||||
<!-- 通用的css -->
|
||||
<link rel="stylesheet" href="../../css/common.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 轮播图 -->
|
||||
<div id="layui-carousel" class="layui-carousel">
|
||||
<div carousel-item>
|
||||
<div class="layui-carousel-item" v-for="(item, index) in swiperList" :key="index">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="breadcrumb">
|
||||
<span class="en">DATA SHOW</span>
|
||||
<span class="cn">轮播图管理展示</span>
|
||||
</div>
|
||||
|
||||
<!-- 图文列表 -->
|
||||
<div :style='{"padding":"0","margin":"0px auto","flexWrap":"wrap","background":"none","display":"flex","width":"100%","position":"relative"}' class="recommend">
|
||||
|
||||
<form :style='{"alignItems":"center","padding":"30px 20px","borderColor":"#bcdbdf","margin":"20px 7% 0","alignItems":"center","itemsAlign":"center","justifyContent":"center","display":"flex","width":"100%","borderWidth":"1px","borderStyle":"outset","height":"auto"}' class="filter form">
|
||||
<div :style='{"alignItems":"center","margin":"0 4px 0 0","display":"flex"}' class="item-list">
|
||||
<div class="lable-input">名称</div>
|
||||
<input type="text" name="name" :style='{"border":"1px solid #eee","padding":"0 10px","boxShadow":"0px 0px 0px #ccc","margin":"0","color":"#666","fontSize":"14px","lineHeight":"40px","width":"120px","borderRadius":"30px","outline":"none"}' placeholder="名称" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
|
||||
<button :style='{"cursor":"pointer","padding":"0px 10px","margin":"0 10px 0 0","color":"#fff","minWidth":"90px","outline":"none","borderRadius":"30px","background":"#40a9ff","borderWidth":"0px","width":"auto","fontSize":"14px","lineHeight":"42px","height":"40px"}' @click="search()"><i :style='{"color":"#fff","margin":"0 10px 0 0","fontSize":"14px"}' class="layui-icon layui-icon-search"></i>搜索</button>
|
||||
<button v-if="isAuth('config','新增')" :style='{"cursor":"pointer","padding":"0px 10px","margin":"0 4px 0 0","color":"#fdaaba","minWidth":"90px","outline":"none","borderRadius":"30px","background":"#f7aa00","borderWidth":"0px","width":"auto","fontSize":"14px","lineHeight":"42px","height":"40px"}' @click="jump('../config/add.jsp')" type="button" class="btn btn-theme">
|
||||
<i :style='{"color":"#fff","margin":"0 10px 0 0","fontSize":"14px"}' class="layui-icon"></i>新增
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div :style='{"padding":"40px 0 20px","margin":"40px 7% 0px 7%","flex":"1","background":"none","display":"flex","width":"100%","minWidth":"885px","borderWidth":"0 0 0 0","borderStyle":"solid","height":"auto","order":4}' class="lists">
|
||||
<!-- 样式二 -->
|
||||
<div :style='{"padding":"0","margin":"0 0 100px","flexWrap":"wrap","background":"none","display":"flex","justifyContent":"space-between","alignItems":"center","width":"100%","height":"auto"}' class="list list-2">
|
||||
<div v-for="(item,index) in dataList" :key="index" @click="jump('../config/detail.jsp?id='+item.id)" :style='{"cursor":"pointer","padding":"10px","margin":"0 0 100px","boxShadow":"0px 0px 0px #eee","borderColor":"#f3d7ca","display":"flex","justifyContent":"space-between","flexWrap":"wrap","width":"49%","borderWidth":"0px","borderStyle":"solid","height":"240px","position":"relative","borderColor":"#f3d7ca"}' class="list-item animation-box">
|
||||
<img :src="item.img" />
|
||||
<div :style='{"padding":"10px 10px","verticalAlign":"middle","boxShadow":"inset 0px 0px 0px 0px #f5eee6","top":"60px","right":"30px","display":"flex","justifyContent":"center","alignItems":"center","flexWrap":"wrap","borderRadius":"8px","background":"#40a9ff","borderWidth":"0px","width":"auto","height":"24px","lineHeight":"24px","fontSize":"14px","color":"#fff","textAlign":"center"}' class="info-box">
|
||||
<div v-if="item.price" :style='{"width":"100%","padding":"0px 4px","lineHeight":"24px","fontSize":"14px","color":"#f00","textAlign":"center"}' class="time">￥{{Number(item.price).toFixed(2)}}</div>
|
||||
<div v-if="item.vipprice&&item.vipprice>0" :style='{"width":"100%","padding":"0px 4px","lineHeight":"24px","fontSize":"14px","color":"#f00","textAlign":"center"}' class="time">￥{{Number(item.vipprice).toFixed(2)}}} 会员价</div>
|
||||
<div v-if="item.jf" :style='{"width":"100%","padding":"0px 4px","lineHeight":"24px","fontSize":"14px","color":"#f00","textAlign":"center"}' class="time">{{Number(item.jf).toFixed(0)}}积分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pager" id="pager"></div>
|
||||
</div>
|
||||
|
||||
<!-- layui -->
|
||||
<!-- vue -->
|
||||
<!-- 组件配置信息 -->
|
||||
<!-- 扩展插件配置信息 -->
|
||||
<!-- 工具方法 -->
|
||||
<script>
|
||||
var vue = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
// 轮播图
|
||||
swiperList: [{
|
||||
img: '../../img/banner.jpg'
|
||||
}],
|
||||
baseurl: '',
|
||||
dataList: []
|
||||
},
|
||||
methods: {
|
||||
isAuth(tablename, button) {
|
||||
return isFrontAuth(tablename, button)
|
||||
},
|
||||
jump(url) {
|
||||
jump(url)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
// 获取列表数据
|
||||
http.request('config/list', 'get', param, function(res) {
|
||||
vue.dataList = res.data.list
|
||||
// 分页
|
||||
laypage.render({
|
||||
elem: 'pager',
|
||||
count: res.data.total,
|
||||
limit: limit,
|
||||
groups: 5,
|
||||
layout: ["count","prev","page","next","limit","skip"],
|
||||
prev: '上一页',
|
||||
next: '下一页',
|
||||
jump: function(obj, first) {
|
||||
param.page = obj.curr;
|
||||
//首次不执行
|
||||
if (!first) {
|
||||
http.request('config/list', 'get', param, function(res) {
|
||||
vue.dataList = res.data.list
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Layui Example</title>
|
||||
<!-- 引入layui的CSS文件 -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.7.6/dist/css/layui.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 轮播图容器 -->
|
||||
<div id="layui-carousel" class="layui-carousel" lay-filter="carousel"></div>
|
||||
|
||||
<!-- 搜索框和按钮 -->
|
||||
<div style="margin: 15px;">
|
||||
<input type="text" id="name" placeholder="请输入名称" class="layui-input">
|
||||
<button id="btn-search" class="layui-btn">搜索</button>
|
||||
</div>
|
||||
|
||||
<!-- 列表容器 -->
|
||||
<div id="list-container"></div>
|
||||
|
||||
<!-- 分页容器 -->
|
||||
<div id="pager"></div>
|
||||
</div>
|
||||
|
||||
<!-- 引入layui的JS文件 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/layui@2.7.6/dist/layui.all.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'layer', 'element', 'carousel', 'laypage', 'http', 'jquery','laydate', 'slider'], function() {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var element = layui.element;
|
||||
var carousel = layui.carousel;
|
||||
var laypage = layui.laypage;
|
||||
var http = layui.http;
|
||||
var jquery = layui.jquery;
|
||||
var laydate = layui.laydate;
|
||||
var slider = layui.slider;
|
||||
var limit = 12;
|
||||
vue.baseurl = http.baseurl;
|
||||
// 获取轮播图数据
|
||||
http.request('config/list', 'get', {
|
||||
page: 1,
|
||||
limit: 3
|
||||
}, function(res) {
|
||||
if (res.data.list.length > 0) {
|
||||
let swiperList = [];
|
||||
res.data.list.forEach(element => {
|
||||
if (element.value != null) {
|
||||
swiperList.push({
|
||||
img: http.baseurl + element.value
|
||||
});
|
||||
}
|
||||
});
|
||||
vue.swiperList = swiperList;
|
||||
|
||||
vue.$nextTick(() => {
|
||||
carousel.render({
|
||||
elem: '#layui-carousel',
|
||||
width: '100%',
|
||||
height: '680px',
|
||||
anim: 'default',
|
||||
autoplay: 'true',
|
||||
interval: '5000',
|
||||
arrow: 'none',
|
||||
indicator: 'inside'
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 分页列表
|
||||
pageList();
|
||||
|
||||
// 搜索按钮
|
||||
jquery('#btn-search').click(function(e) {
|
||||
pageList();
|
||||
});
|
||||
|
||||
function pageList() {
|
||||
var param = {
|
||||
page: 1,
|
||||
limit: limit
|
||||
}
|
||||
|
||||
if (jquery('#name').val()) {
|
||||
param['name'] = jquery('#name').val() ? '%' + jquery('#name').val() + '%' : '';
|
||||
}
|
||||
|
||||
// 获取列表数据
|
||||
http.request('config/list', 'get', param, function(res) {
|
||||
vue.dataList = res.data.list;
|
||||
// 分页
|
||||
laypage.render({
|
||||
elem: 'pager',
|
||||
count: res.data.total,
|
||||
limit: limit,
|
||||
groups: 5,
|
||||
layout: ["count", "prev", "page", "next", "limit", "skip"],
|
||||
prev: '上一页',
|
||||
next: '下一页',
|
||||
jump: function(obj, first) {
|
||||
param.page = obj.curr;
|
||||
// 首次不执行
|
||||
if (!first) {
|
||||
http.request('config/list', 'get', param, function(res) {
|
||||
vue.dataList = res.data.list;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in new issue