找到
1
篇与
彩虹模板
相关的结果
-
彩虹云商城 faka发卡模板全部新ui重置 前言： 设计加重置前前后后差不多花了一个多星期本来想前后端都修改的但是后端几乎没啥用用户端我都关闭的就更没有必要了，所以就做了前端和部分的登陆界面。彩虹云商城源码 如果没有源码的可以下载这个我也是在网上找的作者我已经找不到了也忘记那个博客下载的了原版源码里面为改动 彩虹云商城 下载地址：https://img.01kl.cn/down.php/84c67e5bfa95eed2dca9b50c8f248b98.zip 提取码： 样式图片 彩虹云商城 发卡模板图片 查单图片 订单图片 登陆图片 订单1图片 订单信息图片 提卡图片 前端测试站点 https://fk.bl01.cn/ 接入方式 第一种也是最节点的一种 打开后台点击模板点击模板设置 模板图片 第二步 下滑看到静态cdn我们填上 //cdn.01kl.cn/CDN/css/caihong/静态cdn图片 这样就设置完成了 打开浏览器强制刷新一下就可以了 第二种接入方法修改css 方法一 打开这个路径 assets/faka/ 然后把css文件下载直接替换覆盖 css3.css 下载地址：https://img.01kl.cn/down.php/b1afbec1eafd427342c17a5743998dc3.css 提取码： 方法二 css路径为 assets/faka/css3.css 复制下面的css代码粘贴进去就可以了 如果需要更好看协调的可以自己修改 排版我已经加了注释 @charset "utf-8"; /* 基础样式重置 */ body,div,ul,li{ margin:0; padding:0; font-style:normal; font:14px/22px "\5B8B\4F53",Arial,Helvetica,sans-serif } ol,ul,li{list-style:none} /* 导航栏样式 */ .dh{ border-top:3px solid #00A2CA; border-bottom:5px solid #017390; width:100%; height:60px; background:#00A2CA; } img{border:0;vertical-align:middle} body{color:#000000;background:#FFF;} .clear{clear:both;height:1px;width:100%;overflow:hidden;margin-top:-1px} a{color:#0089C9;text-decoration:none} a:hover{color:#CF0D03} .red,.red a{color:#F00} .lan,.lan a{color:#1E51A2} .pd5{padding-top:5px} .dis{display:block} .undis{display:none} /* 主导航菜单 - 液态毛玻璃效果 */ ul#nav { width: 1180px; margin-right: auto; margin-left: auto; height: 50px; background: rgba(0, 162, 202, 0.7); /* 半透明背景 */ backdrop-filter: blur(10px); /* 毛玻璃效果 */ -webkit-backdrop-filter: blur(10px); /* 兼容Safari */ border-radius: 12px; /* 圆角 */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 柔和阴影 */ border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明边框 */ position: relative; overflow: hidden; } /* 液态背景动画效果 */ ul#nav::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, rgba(0, 162, 202, 0.8), rgba(0, 146, 202, 0.6), rgba(0, 210, 202, 0.7) ); animation: liquid 8s infinite alternate; z-index: -1; border-radius: 40%; } @keyframes liquid { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ul#nav li { display: inline; height: 60px; position: relative; z-index: 1; } ul#nav li a { display: inline-block; padding: 0 20px; height: 60px; line-height: 60px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #FFF; font-family: "\5FAE\8F6F\96C5\9ED1"; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 文字阴影 */ transition: all 0.3s ease; /* 平滑过渡 */ position: relative; overflow: hidden; } ul#nav li a:hover { background: rgba(1, 115, 144, 0.6); transform: translateY(-2px); /* 悬停上浮效果 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 悬停阴影 */ } /* 悬停时的液态光效 */ ul#nav li a::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: rgba(255, 255, 255, 0.1); transform: rotate(30deg); transition: all 0.6s ease; opacity: 0; } ul#nav li a:hover::after { opacity: 1; animation: shine 1.5s infinite; } @keyframes shine { 0% { left: -100%; } 100% { left: 100%; } } /* 头部区域 */ #head .top{ height:100px; width:1180px; margin-right:auto; margin-left:auto; background:#FFFFFF; } .a2{background:#017390} #head .top .logo{ float:left; height:70px; width:350px; margin-top:14px; margin-bottom:14px; background-image:url(../images/logo.png); cursor:pointer; } #head .top .info{ float:right; height:55px; margin-top:16px; margin-bottom:15px; width:500px; text-align:right; color:#0089C9; } /* 主体内容区域 */ #body{ height:auto; min-height:100px; width:1180px; margin-top:15px; margin-right:auto; margin-left:auto; border:1px solid #c8d9f5; overflow:hidden; margin-bottom:65px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .body_s{ height:auto; min-height:10px; width:890px; margin-top:15px; padding:10px; margin-right:auto; margin-left:auto; border:1px solid #CCCCCC; overflow:hidden; margin-bottom:15px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } #body_xiao{ height:auto; min-height:100px; width:910px; margin-top:15px; margin-right:auto; margin-left:auto; border:1px solid #c8d9f5; overflow:hidden; margin-bottom:65px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } #kong{ height:auto; min-height:100px; width:1180px; margin-top:15px; padding-bottom:30px; padding-top:30px; margin-right:auto; margin-left:auto; overflow:hidden; margin-bottom:65px; overflow:hidden; border:1px solid #c4e7ff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } #head .gonggao{ width:1180px; margin-right:auto; margin-left:auto; height:28px; background-color:#FFF7F7; border:1px solid #FFCACA; margin-top:10px; line-height:28px; text-align:left; color:#0089C9; } #footer{ height:45px; border-top-width:1px; border-top-style:solid; border-top-color:#EBEBEB; width:100%; margin-right:auto; margin-left:auto; text-align:center; color:#ccc; margin-top:20px; line-height:45px; } #head .top .info .welcome{ line-height:28px; display:inline-block; margin-right:10px; font-weight:lighter; text-align:right; } .user{color:#0089C9;} .lv{color:#FF6600;} /* 卡片布局 - 液态毛玻璃效果 */ #body ul .kuang { height: auto; width: 33.333%; display: block; float: left; padding: 10px; box-sizing: border-box; } #body ul .kuang .nei { margin: 15px; min-height: 300px; position: relative; cursor: pointer; border-radius: 12px; overflow: hidden; border: 1px solid rgba(223, 223, 223, 0.3); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } /* 液态背景效果 */ #body ul .kuang .nei::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0, 137, 201, 0.1) 0%, rgba(0, 137, 201, 0.05) 50%, rgba(255, 255, 255, 0.2) 100%); z-index: -1; opacity: 0; transition: opacity 0.6s ease; } #body ul .kuang .nei:hover { border: 1px solid rgba(0, 137, 201, 0.5); transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 137, 201, 0.15); } #body ul .kuang .nei:hover::before { opacity: 1; animation: liquidFlow 8s infinite linear; } @keyframes liquidFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #body ul .kuang .nei .bot { height: 50px; width: 100%; background-color: rgba(240, 240, 240, 0.85); position: absolute; bottom: 0px; left: 0px; text-align: right; color: #333333; line-height: 50px; font-size: 15px; font-family: "微软雅黑"; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-top: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; } #body ul .kuang .nei:hover .bot { background-color: rgba(0, 137, 201, 0.1); color: #0089C9; } .jia { text-decoration: line-through; font-style: normal; opacity: 0.7; } #body ul .kuang .nei p { margin: 15px; overflow: hidden; font-size: 13px; text-align: left; color: #666; line-height: 20px; position: relative; z-index: 1; } #body ul .kuang .nei .shang { color: #0089C9; font-size: 16px; text-align: center; margin: 20px 8px; font-weight: bold; position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } #body ul .kuang .nei .num { text-align: left; margin-left: 15px; position: absolute; z-index: 100; bottom: 60px; left: 0px; color: #999; transition: all 0.3s ease; } #body ul .kuang .nei:hover .num { color: #0089C9; transform: scale(1.05); } /* 添加光效点缀 */ #body ul .kuang .nei::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; } #body ul .kuang .nei:hover::after { opacity: 0.6; } /* 卡片背景图标 */ #body ul .kuang .nei.qq{background-image:url(../images/qq.png);background-repeat:no-repeat;background-position:right 155px;} #body ul .kuang .nei.weixin{background-image:url(../images/weixin.png);background-repeat:no-repeat;background-position:right 155px;} #body ul .kuang .nei.ww{background-image:url(../images/ww.png);background-repeat:no-repeat;background-position:right 155px;} #body ul .kuang .nei.bd{background-image:url(../images/bd.png);background-repeat:no-repeat;background-position:right 155px;} #body ul .kuang .nei.yi{background-image:url(../images/yi.png);background-repeat:no-repeat;background-position:right 155px;} #body ul .kuang .nei.mail{background-image:url(../images/mail.png);background-repeat:no-repeat;background-position:right 155px;} #body ul .kuang .nei.yy{background-image:url(../images/yy.png);background-repeat:no-repeat;background-position:right 155px;} /* 表单样式 */ .reg{width:99%;padding:10px;margin-right:auto;margin-left:auto;} .from{width:100%;margin-bottom:10px;overflow:hidden;height:40px;line-height:35px;color:#666;} .from_wz_1{float:left;width:8%;line-height:35px;margin-right:2%;text-align:right;} .from_wz_2{float:left;line-height:40px;margin-right:2%;text-align:right;} .from_wz_3{float:left;width:28%;line-height:35px;margin-right:2%;text-align:right;display:block;} .from_wz_4{float:left;width:36%;line-height:35px;margin-right:4%;text-align:right;} .from_wz_5{float:left;width:46%;line-height:35px;margin-right:4%;text-align:right;} .from_wz_6{float:left;width:55%;line-height:35px;margin-right:5%;text-align:right;} .from_wz_7{float:left;width:65%;line-height:35px;margin-right:5%;text-align:right;} .from_wz_8{float:left;width:75%;line-height:35px;margin-right:5%;text-align:right;} .from_wz_9{float:left;width:85%;line-height:25px;margin-right:5%;text-align:right;} .from_wz_10{float:left;width:95%;margin-right:5%;text-align:left;} .from_in_9{float:left;width:90%;line-height:35px;text-align:left;} .from_in_8{float:left;width:80%;line-height:35px;text-align:left;} .from_in_7{float:left;width:70%;line-height:35px;text-align:left;} .from_in_6{float:left;width:60%;line-height:35px;text-align:left;} .from_in_5{float:left;width:50%;text-align:left;line-height:35px;} .from_in_4{float:left;width:40%;text-align:left;line-height:35px;} .from_in_3{float:left;width:30%;text-align:left;line-height:35px;} .from_in_2{float:left;width:20%;text-align:left;line-height:35px;} .from_in_1{float:left;width:10%;text-align:left;line-height:35px;} /* 基础输入框样式 */ input { line-height: 30px; border: 1px solid #CCC; width: 99%; padding-left: 2%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #666; min-height: 28px; font-size: 14px; transition: all 0.3s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); background-color: #FFF; } /* 聚焦状态 */ input:focus { outline: none; border-color: #66AFE9; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 5px rgba(102,175,233,0.5); } /* 红色按钮样式 */ .input_red { color: #FFF; background-color: #F44336; border: 1px solid #D32F2F; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); } .input_red:hover { background-color: #E53935; } /* 黄色按钮样式 */ .input_yellow { color: #FFF; background-color: #FFC107; border: 1px solid #FFA000; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,0.1); box-shadow: 0 2px 3px rgba(0,0,0,0.1); } .input_yellow:hover { background-color: #FFB300; } /* 蓝色按钮样式 */ .input_lan { color: #FFF; width: 100%; background-color: #2196F3; border: 1px solid #1976D2; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); } .input_lan:hover { background-color: #1E88E5; } .from_off_1{float:left;width:10%;min-height:30px;display:block;} .from_off_2{float:left;width:20%;min-height:30px;display:block;} .from_off_3{float:left;width:30%;min-height:30px;display:block;} .from_off_4{float:left;width:30%;min-height:40px;display:block;} .from_off_5{float:left;width:50%;min-height:30px;display:block;} .from_off_6{float:left;width:60%;min-height:30px;display:block;} .from_off_7{float:left;width:70%;min-height:30px;display:block;} .from_off_8{float:left;width:80%;min-height:30px;display:block;} .from_off_9{float:left;width:90%;min-height:30px;display:block;} .line{height:1px;margin-top:20px;margin-bottom:20px;border-top-width:1px;border-top-style:solid;border-top-color:#CCC;width:90%;margin-right:auto;margin-left:auto;} .wu{height:10px;display:block;width:100%;} .yanzheng{margin-left:5px;} /* 表格容器 - 美化版 */ .table { margin: 15px 0; width: 100%; overflow-x: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 4px; background-color: #fff; position: relative; } /* 添加滚动条样式（适用于Webkit浏览器） */ .table::-webkit-scrollbar { height: 8px; background-color: #f5f5f5; } .table::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 4px; } .table::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; } /* 响应式调整 */ @media (max-width: 768px) { .table { margin: 10px 0; box-shadow: none; border: 1px solid #e0e0e0; } } /* 基础表格样式 - 优化版 */ table { width: 100%; color: #505050; border-collapse: separate; border-spacing: 0; font-family: "微软雅黑", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; line-height: 1.6; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease; position: relative; z-index: 1; } /* 表格悬停效果 */ table:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } /* 响应式调整 */ @media (max-width: 768px) { table { border-radius: 6px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); } } /* 表头样式 - 优化版 */ table tr th { padding: 14px 12px; font-size: 14px; font-weight: 600; background: linear-gradient(to bottom, #f0f9ff, #e0f2fe); color: #1d4ed8; border-bottom: 2px solid #dbeafe; text-align: center; position: relative; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } /* 表头悬停效果 */ table tr th:hover { background: linear-gradient(to bottom, #e0f2fe, #bae6fd); color: #1e40af; } /* 表头排序指示器 */ table tr th.sortable:after { content: "↕"; margin-left: 6px; font-size: 12px; opacity: 0.3; display: inline-block; transition: transform 0.2s ease; } table tr th.sortable:hover:after { opacity: 0.8; } /* 响应式调整 */ @media (max-width: 768px) { table tr th { padding: 10px 8px; font-size: 13px; } } /* 斑马条纹表格的配套样式 */ table.striped tr th { border-bottom: none; box-shadow: 0 2px 0 #dbeafe; } /* 单元格样式 */ table tr td { padding: 10px 8px; font-size: 13px; border-bottom: 1px solid #f0f4f8; text-align: center; transition: all 0.2s ease; } /* 行悬停效果 */ table tr:hover { background-color: #f8fafd; } table tr:hover td { color: #2c7be5; } /* 斑马纹效果（可选） */ table tr:nth-child(even) { background-color: #fafcff; } /* 最后一行的底部边框去除 */ table tr:last-child td { border-bottom: none; } /* 圆角效果 */ table tr:first-child th:first-child { border-top-left-radius: 8px; } table tr:first-child th:last-child { border-top-right-radius: 8px; } table tr:last-child td:first-child { border-bottom-left-radius: 8px; } table tr:last-child td:last-child { border-bottom-right-radius: 8px; } /* 分页容器 - 优化版 */ .fenye { float: right; margin: 20px 0; display: flex; align-items: center; gap: 8px; /* 元素间距 */ } /* 分页容器响应式 */ @media (max-width: 768px) { .fenye { float: none; margin: 15px auto; justify-content: center; width: 100%; flex-wrap: wrap; } } /* 右对齐文本 - 增强版 */ .text-right { text-align: right; padding-right: 12px; position: relative; } /* 带图标的右对齐 */ .text-right.with-icon { padding-right: 24px; } .text-right.with-icon:after { content: "→"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0.6; } /* 表格中的右对齐单元格 */ table .text-right { padding-right: 16px; } /* 分页主体样式 */ .pagination { display: flex; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .pagination li { min-width: 32px; height: 32px; border-radius: 4px; border: 1px solid #e0e0e0; display: inline-flex; align-items: center; justify-content: center; color: #555; font-size: 14px; transition: all 0.2s ease; } /* 分页项悬停效果 */ .pagination li:hover { background-color: #0089C9; color: #FFF; border-color: #0089C9; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 137, 201, 0.2); } /* 当前激活页样式 */ .pagination .active { background-color: #0089C9; color: #FFF; border-color: #0089C9; font-weight: 500; } /* 分页链接样式 */ .pagination li a { color: inherit; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 12px; } /* 特殊元素样式（如每页显示行数） */ .pagination li .rows { padding: 0 10px; border: none; background: transparent; } /* 标题样式 */ .title { font-weight: 600; color: #444; font-size: 18px; font-family: "微软雅黑", "Microsoft YaHei", sans-serif; margin-bottom: 15px; } /* 右侧排序/操作 */ .order_r { float: right; color: #0089C9; font-size: 14px; cursor: pointer; transition: color 0.2s; } .order_r:hover { color: #006ba1; text-decoration: underline; } /* 数字高亮 */ .shu { color: #FF6600; font-weight: 600; font-size: 16px; } /* 状态颜色 */ .success { color: #28a745; } .error { color: #ff6b6b; } /* 新增：禁用状态 */ .pagination .disabled { opacity: 0.5; pointer-events: none; } /* 新增：分页信息文字 */ .pagination-info { margin-right: 15px; color: #666; font-size: 14px; } /* 左右布局 不能动*/ .left{height:auto;width:24%;float:left;overflow:hidden;padding-bottom:30px;} .rigth{float:right;width:75%;min-height:600px;background-color:#FFFFFF;border-left-width:1px;border-left-style:solid;border-left-color:#c8d9f5;overflow:hidden;} .left .tou{ background-image:url(../images/qq.png); background-repeat:no-repeat; background-position:center center; width:150px; height:150px; margin-right:auto; margin-left:auto; margin-top:20px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border:1px solid #CCC; overflow:hidden; background-color:#FFF; } .tou.weixin{background-image:url(../images/weixin.png);background-repeat:no-repeat;background-position:center center;} .tou.mail{background-image:url(../images/mail.png);background-repeat:no-repeat;background-position:center center;} .tou.yy{background-image:url(../images/yy.png);background-repeat:no-repeat;background-position:center center;} .tou.yi{background-image:url(../images/yi.png);background-repeat:no-repeat;background-position:center center;} .tou.bd{background-image:url(../images/bd.png);background-repeat:no-repeat;background-position:center center;} .tou.ww{background-image:url(../images/ww.png);background-repeat:no-repeat;background-position:center center;} .tou.qq{background-image:url(../images/qq.png);background-repeat:no-repeat;background-position:center center;} .left .bianhao{text-align:center;line-height:30px;font-size:12px;font-family:Tahoma,Geneva,sans-serif;color:#333;} .left .top{margin-right:10px;margin-left:10px;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#E6E6E6;overflow:hidden;padding-bottom:30px;} .left .xia{margin-top:20px;margin-right:15px;margin-left:15px;font-family:"微软雅黑";color:#333;font-size:12px;} .bobo{width:100%;height:auto;background-color:#E8F8FF;overflow:hidden;} .rigth .title{font-family:"微软雅黑";font-weight:lighter;overflow:hidden;margin-top:5px;margin-right:15px;margin-bottom:15px;margin-left:15px;} .rigth .title h3{font-family:"微软雅黑";color:#000000;font-weight:lighter;font-size:24px;} .rigth .dengji{overflow:hidden;margin-top:5px;margin-right:15px;margin-bottom:15px;margin-left:15px;} .dengji ul li{ line-height:22px; border:1px solid #CCCCCC; float:left; font-size:12px; padding-right:12px; padding-left:12px; color:#666; height:22px; -webkit-border-radius:11px; -moz-border-radius:11px; border-radius:11px; text-align:center; margin-top:3px; margin-right:5px; margin-bottom:3px; margin-left:5px; } .rigth .xiangqing{ margin-right:15px; margin-left:15px; min-height:300px; margin-top:10px; margin-bottom:15px; background-color:#FFFFFF; padding:15px; font-size:14px; color:#333; } .z{text-align:center;} .dengji ul .bg{background-color:#ECFBFF;} .anniu.lv{background-color:#0089C9;border:1px solid #0089C9;color:#FFF;} .anniu.lv:hover{background-color:#0089C9;border:1px solid #0089C9;color:#FFF;} .da{font-size:16px;font-weight:bold;} .bg{background-image:url(../images/bt.png);background-repeat:repeat;background-position:center center;height:40px;width:160px;} .daanniu{ line-height:22px; background-color:#FC0; display:inline-block; padding-top:5px; padding-right:15px; padding-bottom:5px; padding-left:15px; font-size:14px; font-family:"微软雅黑"; color:#000; } .empty{text-align:center;line-height:50px;display:block;color:#F00;font-weight:bold;font-size:16px;font-family:'微软雅黑';} i{font-style:normal;color:#F00;} em{color:#9F0;font-style:normal;} .anniu{ text-align:center; line-height:18px; font-size:12px; background-color:#BBBBBB; display:inline-block; color:#FFF; padding-right:6px; padding-left:6px; cursor:pointer; padding-top:2px; padding-bottom:2px; text-decoration:none; margin-right:2px; margin-left:2px; } .anniu:hover{color:#FFF;background-color:#999999;} .tr{color:#090;} .tr2{color:#960;} .content{font-family:"微软雅黑";text-align:center;font-size:24px;color:#000;padding-top:20px;padding-bottom:30px;} .info_pic{height:64px;width:64px;margin-right:auto;margin-bottom:10px;margin-left:auto;} .info_c{font-family:"微软雅黑";font-size:32px;line-height:50px;text-align:center;} .info_t{font-size:14px;color:#666;} /* 基础布局容器 不能动*/ #bd { width: 1180px; margin: 0 auto; overflow: hidden; padding: 15px 0; } /* 侧边栏 - 优化版 不能动*/ #bar { float: left; min-height: 500px; width: 250px; margin-top: 15px; border: 1px solid #e1e8ed; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* 内容区 - 优化版不能动 */ #bar_r { float: right; width: 920px; min-height: 500px; overflow: hidden; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* 侧边栏顶部标题 - 优化版 */ #bar .bar_top { text-align: center; font-family: "微软雅黑"; line-height: 50px; color: #fff; font-size: 18px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1); background: linear-gradient(135deg, #0089C9, #00a8ff); padding: 0 15px; } /* 侧边栏菜单 - 专业优化版 */ #bar #bar_ul { padding: 0; margin: 0; list-style: none; } #bar #bar_ul li { font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif; font-size: 14px; line-height: 50px; font-weight: 500; border-bottom: 1px solid #f0f5fa; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } #bar #bar_ul li:hover { background-color: #f8fbfe; transform: translateX(3px); } #bar #bar_ul .va { background-color: #f5fbff; border-left: 3px solid #0089C9; box-shadow: inset 4px 0 8px rgba(0, 168, 255, 0.05); } #bar #bar_ul li a { color: #444; height: 50px; display: flex; align-items: center; padding: 0 20px; text-decoration: none; transition: all 0.25s ease; position: relative; } #bar #bar_ul li a:hover { color: #0077b3; } #bar #bar_ul .va a { color: #0089C9; font-weight: 600; } #bar #bar_ul .va a:hover { color: #0069a3; } /* 添加菜单项图标 */ #bar #bar_ul li a::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c0d8f0; margin-right: 12px; transition: all 0.3s ease; } #bar #bar_ul li:hover a::before { background: #0089C9; transform: scale(1.2); } #bar #bar_ul .va a::before { background: #0089C9; } /* 响应式调整 */ @media (max-width: 768px) { #bar #bar_ul li { line-height: 44px; } #bar #bar_ul li a { height: 44px; } } /* 通用标题样式 - 专业优化版 */ .wodetitle { text-align: center; height: 50px; line-height: 50px; margin: 0 0 20px 0; /* 优化外边距 */ font-size: 20px; color: #2c3e50; /* 更专业的深色 */ font-weight: 600; font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif; /* 完善字体栈 */ border-bottom: 1px solid #e8edf3; /* 更精致的边框 */ position: relative; background: linear-gradient(to right, transparent 10%, #f8fafc 50%, transparent 90%); /* 极简背景渐变 */ letter-spacing: 0.5px; /* 字距微调 */ } /* 标题装饰线 - 可选 */ .wodetitle::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: #0089C9; opacity: 0.8; } /* 标题悬停效果 */ .wodetitle:hover { color: #0069a3; /* 悬停颜色变化 */ border-bottom-color: #d6e3f0; } /* 大尺寸变体 */ .wodetitle.large { font-size: 24px; height: 60px; line-height: 60px; margin-bottom: 25px; } /* 小尺寸变体 */ .wodetitle.small { font-size: 16px; height: 40px; line-height: 40px; margin-bottom: 15px; } /* 左侧对齐变体 */ .wodetitle.left { text-align: left; padding-left: 20px; background: linear-gradient(to right, #f8fafc, transparent 80%); } /* 响应式调整 */ @media (max-width: 768px) { .wodetitle { font-size: 18px; height: 44px; line-height: 44px; } } /* 登录框 - 专业优化版 */ #logins { width: 500px; min-height: 100px; margin: 60px auto; padding: 40px; border: 1px solid #e8edf3; /* 更柔和的边框颜色 */ border-radius: 10px; /* 稍大的圆角 */ background-color: #fff; background-image: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.95)), /* 半透明白色叠加层 */ url(../images/denglulogin.png); background-size: cover; background-position: center; box-shadow: 0 5px 15px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02); /* 双层阴影 */ transition: all 0.3s ease; position: relative; overflow: hidden; } /* 登录框悬停效果 */ #logins:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03); border-color: #d6e0f0; } /* 登录框标题样式 */ #logins .login-title { font-size: 22px; color: #2c3e50; margin-bottom: 30px; text-align: center; font-weight: 600; position: relative; padding-bottom: 10px; } #logins .login-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: #0089C9; } /* 表单元素间距优化 */ #logins .form-group { margin-bottom: 20px; } /* 响应式调整 */ @media (max-width: 576px) { #logins { width: 90%; padding: 30px 20px; margin: 40px auto; } #logins .login-title { font-size: 20px; } } /* 加载状态 */ #logins.loading { pointer-events: none; opacity: 0.9; } #logins.loading::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.7); z-index: 10; } /* 错误状态 */ #logins.error { animation: shake 0.5s; border-color: #ff6b6b; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } /* 错误页面 - 优化版 */ #errorbg { height: auto; min-height: 100px; width: 780px; margin: 50px auto 65px; padding: 30px; overflow: hidden; border: 1px solid #e1e8ed; border-radius: 8px; background: #fff url(../images/errorbg.png) repeat-x; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } /* 表单验证提示 - 专业优化版 */ .Validform_checktip { margin: 4px 0 0 8px; /* 调整外边距 */ line-height: 20px; height: 20px; font-size: 12px; display: flex; align-items: center; transition: all 0.3s ease; } /* 验证通过样式 */ .Validform_right { color: #28a745; padding-left: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left center; background-size: 16px; } /* 验证错误样式 */ .Validform_wrong { color: #dc3545; padding-left: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E") no-repeat left center; background-size: 16px; animation: shake 0.4s ease; } /* 加载中样式 */ .Validform_loading { padding-left: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230089C9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'%3E%3C/path%3E%3C/svg%3E") no-repeat left center; background-size: 16px; color: #0089C9; } /* 错误输入框样式 */ .Validform_error { background-color: #fff5f5; border-color: #ffb3b3 !important; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1); transition: all 0.3s ease; } /* 错误提示动画 */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } } /* 响应式调整 */ @media (max-width: 576px) { .Validform_checktip { margin-left: 4px; font-size: 11px; } .Validform_right, .Validform_wrong, .Validform_loading { padding-left: 20px; background-size: 14px; } } /* 订单确认页面 - 优化版 */ #dingdanqueren { height: auto; min-height: 100px; width: 880px; margin: 50px auto 65px; padding: 30px; overflow: hidden; border: 1px solid #e1e8ed; border-radius: 8px; background: #fff url(../images/dinggoubg.png) repeat-x; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .dingdantitle { text-align: center; height: 40px; line-height: 40px; margin-bottom: 20px; font-size: 20px; color: #333; font-weight: 600; } /* 流程和交易信息 - 优化版 */ .topliucheng { margin-bottom: 20px; margin: 0 auto; width: 1180px; border: 1px solid #f0f4f8; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .trade-price { color: #FF6600; font-size: 26px; font-weight: 700; } .trade-goodinfo { background-color: #f0f9ff; padding: 20px; margin-bottom: 0; font-size: 24px; border-radius: 8px 8px 0 0; } .trade-goodinfo2 { background-color: #f8fcff; padding: 15px; margin-bottom: 0; font-size: 18px; border-radius: 0 0 8px 8px; } .cz_tr { line-height: 20px; background-color: #FFF; transition: background-color 0.2s ease; } .cz_tr:hover { background-color: #f8fafd; } .huang { background-color: #FFF9E6; } #body .bobo .rigth .title p { font-size: 14px; color: #666; line-height: 1.6; } #parent { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); width: 100%; height: 52px; border: none; border-radius: 14px; padding: 0 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; transition: all 0.3s ease; color: #fff; font-size: 16px; line-height: 52px; } #parent:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%); border-radius: 14px; pointer-events: none; } #parent:after { content: "⌄"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.8); font-size: 20px; pointer-events: none; } #parent select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; width: 100%; height: 100%; padding-right: 40px; color: #fff; font-size: 16px; cursor: pointer; } #parent select option { background: rgba(0, 0, 0, 0.7); color: #fff; border: none; } #parent select:focus { outline: none; } #parent:hover { background: rgba(255, 255, 255, 0.25); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* 表格整体样式 */ table { width: 100%; text-align: left; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border-collapse: separate; border-spacing: 0; background: rgba(255, 255, 255, 0.85); /* 提高背景透明度 */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1); color: #333; /* 改为深色文字 */ border: 1px solid rgba(255, 255, 255, 0.3); /* 添加边框增强层次 */ } /* 表格单元格样式 */ td, th { font-size: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 调整分割线颜色 */ } th { font-weight: 600; /* 加粗表头 */ background: rgba(0, 122, 255, 0.1); /* 浅蓝色表头背景 */ color: #007AFF; /* iOS系统蓝色 */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* 表格行样式 */ tr { height: 48px; transition: all 0.3s ease; } /* 悬停效果 */ tr:hover { background: rgba(0, 122, 255, 0.08) !important; color: #000; /* 悬停时文字变深 */ } /* 特殊样式类 */ .from_wz_41 { width: 230px; text-align: left; padding: 12px 16px; font-size: 16px; background: rgba(0, 122, 255, 0.1); color: #007AFF; /* 与表头一致的蓝色 */ border-radius: 10px; margin: 8px 0; border: 1px solid rgba(0, 122, 255, 0.2); font-weight: 500; } /* 客服按钮 */ .kefu { margin: 16px 0 0 16px; } .kefu a { width: 120px; height: 40px; border-radius: 20px; display: block; line-height: 40px; border: none; color: #FFFFFF; background: linear-gradient(135deg, #007AFF, #0063CE); padding-left: 48px; font-weight: 500; box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all 0.3s ease; position: relative; overflow: hidden; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .kefu a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%); border-radius: 20px; } .kefu a:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 122, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* 二维码区域 */ .erweima { width: 100%; text-align: center; font-size: 14px; color: #333; /* 改为深色文字 */ margin-top: 16px; } .erweima img { display: inline-block; margin-top: 8px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); background: #fff; /* 白色背景确保二维码清晰 */ padding: 8px; border: 1px solid rgba(0, 0, 0, 0.05); } /* 特殊标签 */ .indexlistlb { background-color: rgba(170, 237, 254, 0.5); /* 提高透明度 */ color: #02657d; /* 保持原始深色文字 */ font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: center; padding: 8px 16px; border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 500; } /* 页脚容器 */ .footer { margin-top: 40px; overflow: hidden; clear: both; background: rgba(245, 245, 245, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05); } /* 承诺服务区域 */ .promise { overflow: hidden; clear: both; padding: 38px 72px 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); display: flex; justify-content: space-around; } .promise ul { display: flex; width: 100%; justify-content: space-between; } .promise ul li { width: 23%; text-align: center; transition: transform 0.3s ease; } .promise ul li:hover { transform: translateY(-5px); } .promise .promise-box { display: flex; align-items: center; justify-content: center; } .promise .promise-box .word { width: 64%; text-align: left; margin-left: 15px; color: #007AFF; font-weight: 500; } .promise .promise-box .yec-icon { width: 70px; height: 70px; border-radius: 100%; margin: 0 auto; background: url(../images/footer.png) no-repeat; font-size: 50px; display: inline-block; vertical-align: middle; background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .promise ul li h3 { font-size: 18px; margin-bottom: 8px; color: #1C1C1E; font-weight: 600; } .promise ul li p { color: rgba(60, 60, 67, 0.6); font-size: 14px; line-height: 1.5; } /* 页脚导航区域 */ .foot-navson { padding: 40px 0 30px; overflow: hidden; clear: both; display: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .foot-navson .navsonbox dl { float: left; width: 178px; } .foot-navson .navsonbox dt { margin-bottom: 16px; } .foot-navson .navsonbox dt a { font-size: 16px; color: #1C1C1E; font-weight: 500; } .foot-navson .navsonbox dd a { color: rgba(60, 60, 67, 0.6); line-height: 32px; transition: color 0.2s ease; } .foot-navson .navsonbox dd a:hover { color: #007AFF; } .foot-navson .foot-service { float: right; width: 300px; text-align: center; background: rgba(255, 255, 255, 0.6); border-radius: 14px; padding: 20px; backdrop-filter: blur(10px); } .foot-navson .foot-service p { font-size: 18px; color: #1C1C1E; } .foot-navson .foot-service .tel { font-size: 28px; margin: 12px 0; color: #007AFF; font-weight: 600; } .foot-navson .btn-service { font-size: 16px; color: #fff; background: linear-gradient(135deg, #007AFF, #0063CE); width: 120px; height: 40px; border-radius: 20px; display: block; margin: 0 auto; line-height: 40px; border: none; box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2); transition: all 0.3s ease; } .foot-navson .btn-service:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 122, 255, 0.3); } /* 底部导航链接 */ .foot-sortnav { text-align: center; padding: 20px 0; } .foot-sortnav .box { display: inline-block; position: relative; padding: 0 16px; color: rgba(60, 60, 67, 0.8); font-size: 14px; } .foot-sortnav .box:after { position: absolute; content: ''; width: 1px; height: 14px; background: rgba(60, 60, 67, 0.2); top: 50%; transform: translateY(-50%); right: 0; } .foot-sortnav .box:last-child:after { display: none; } .foot-sortnav .box a { color: rgba(60, 60, 67, 0.8); transition: color 0.2s ease; } .foot-sortnav .box a:hover { color: #007AFF; } /* 版权信息 */ .copyright { font-size: 14px; text-align: center; padding: 20px 0; color: rgba(60, 60, 67, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.4); } .copyright a { color: rgba(60, 60, 67, 0.8); transition: color 0.2s ease; } .copyright a:hover { color: #007AFF; } /* 认证图标 */ .foot-authentication { text-align: center; padding: 20px 0; } .foot-authentication a { display: inline-block; width: 89px; height: 30px; background: url(../images/footer.png) no-repeat; margin: 0 8px; transition: transform 0.3s ease; background-color: rgba(255, 255, 255, 0.7); border-radius: 6px; padding: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .foot-authentication a:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* 其他辅助类 */ .nb { width: 1200px; margin: 0 auto; max-width: 90%; } .ziti { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .tableth1 { border-bottom: 1px dashed rgba(60, 60, 67, 0.2); text-align: center; font-size: 16px; color: #1C1C1E; padding-bottom: 12px; } .tableth2 { text-align: left; font-size: 16px; color: rgba(60, 60, 67, 0.8); } .g-body { background: url("//iknow-pic.cdn.bcebos.com/f31fbe096b63f6241a58c8939544ebf81a4ca31d") center top no-repeat; background-color: #FFF; height: 100%; background-attachment: fixed; background-size: cover; }
