zhangqi
/
client-typeSetting
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页布局

master
zq 3 weeks ago
parent
9786cd2cc1
commit
242335b11a
16 changed files with 1022 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 197
      assets_v2/css/clientSet/common.css
  2. 0
      assets_v2/css/clientSet/home.css
  3. 24
      assets_v2/css/clientSet/index.css
  4. BIN
      assets_v2/images/clientSet/home-page-title.png
  5. BIN
      assets_v2/images/clientSet/home_back.png
  6. BIN
      assets_v2/images/clientSet/logo.png
  7. 60
      assets_v2/js/clientSet/home.js
  8. 2
      assets_v2/js/clientSet/jquery-3.6.0.min.js
  9. 33
      clientCommon/header.html
  10. 0
      clientCommon/kefu.html
  11. 4
      clientSet/footer.html
  12. 128
      clientSet/header.html
  13. 315
      clientSet/kefu.html
  14. 286
      home.html
  15. 6
      index.html

197
assets_v2/css/clientSet/common.css
View File

@ -0,0 +1,197 @@
body {
font-size: 14px;
line-height: 18px;
font-family: Microsoft YaHei UI;
font-weight: normal;
color:var(--white-text-color);
margin: 0;
padding: 0;
background: #F3F5FE;
}
.flex{
display: flex;
display: -ms-flexbox;
justify-content: space-between;
align-items: center;
}
.flex-left-center{
display: flex;
display: -ms-flexbox;
align-items: center;
}
.flex-between-center{
display: flex;
display: -ms-flexbox;
justify-content: space-between;
align-items: center;
}
.hide{
display: none;
}
.over{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
/* 头部导航栏 start */
.header-wrapper{
background: var(--header-bg);
height: 60px;
padding: 0 30px;
overflow: hidden;
display: flex;
display: -ms-flexbox;
min-width: 1028px;
box-sizing: border-box;
position: fixed;
width: 100%;
z-index: 888889;
transition: height 0.3s ease;
transition: background 0.3s ease;
}
.header-wrapper .hleft{
gap: 24px;
}
.header-wrapper .hright{
color: #3F62F6;
}
.header-hcon{
width: 100%;
height: 60px;
opacity: 0;
}
.header-wrapper #hlogo{
height: 30px;
cursor: pointer;
}
.header-wrapper .hleft-menu-item{
width: 80px;
height: 36px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px 12px;
border-radius: 4px;
color: #3D3D3D;
box-sizing: border-box;
}
.header-wrapper .hleft-menu-item.active{
background:#F4F5FA;
font-weight: bold;
color: #3F62F6;
}
/* 头部导航栏 end */
.homePage-wrap img{
width: 512px;
height: 97px;
}
/* kefucom */
.kefuComNew{
position: fixed;
z-index: 888;
right: 10px;
bottom: 140px;
/* width: 60px; */
min-height: 100px;
}
.kefuComNew ul{
display: flex;
flex-direction: column;
padding: 0;
}
.kefuComNew ul > li {
width: 52px;
cursor: pointer;
height: 52px;
box-shadow: 0px 3px 19px 0px rgba(0, 0, 0, 0.02), 0px 2px 9px 0px rgba(0, 0, 0, 0.08);
margin-bottom: 6px;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: 6px;
opacity: 1;
background: #FFFFFF;
border: 1px solid #E8E8E8;
}
.kefuComNew ul > li a{
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.kefuComNew ul > li img{
display: block;
margin: 0px auto;
/* padding-top: 12px; */
width: 22px;
opacity: 1 !important;
}
.kefuComNew .wxkefuImg img{
margin-top: 6px !important;
}
.kefuComNew ul > li p {
margin: 2px 0 0 0;
font-family: MiSans;
font-size: 12px;
font-weight: normal;
line-height: normal;
letter-spacing: 0px;
color: #8C919D;
}
.kefuQq{
color: #1675FF;
}
.kefuWx{
color:#1675FF;
}
.payinnerContent{
margin-top: 30px;
}
.kefuComNew li{
position: relative;
}
.wxkefuImg{
width: 136px;
height: 150px;
background: #FFFFFF;
box-shadow: 0px 1px 23px 0px rgba(15,30,37,0.11);
border-radius: 10px;
position: absolute;
left: -136px;
display: none;
top: 0;
z-index: 8;
}
.wxkefuImg p{
height: 17px;
font-size: 12px;
font-weight: 450;
color: #777777;
line-height: 17px;
}
.kefuWxLi:hover .wxkefuImg{
display: block;
}
/* kefucom */
#container{
min-width: 1180px;
overflow-x: auto;
height: auto;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

0
clientCommon/footer.html → assets_v2/css/clientSet/home.css
View File

24
assets_v2/css/clientSet/index.css
View File

@ -0,0 +1,24 @@
.leftSideFooterNew{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 30px 70px;
font-size: var(--font-small-size);
color: #9E9E9E;
position: relative;
z-index: 98;
}
.leftSideFooterNew p{
margin: 0;
color: #9E9E9E;
}
.leftSideFooterNew p span{
color: #5B6FF6;
display: inline-block;
}
.leftSideFooterNew p a{
color: #9E9E9E;
text-decoration: none;
}

BIN
assets_v2/images/clientSet/home-page-title.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
assets_v2/images/clientSet/home_back.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
assets_v2/images/clientSet/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

60
assets_v2/js/clientSet/home.js
View File

@ -0,0 +1,60 @@
$(document).ready(function () {
// 初始化学校列表
getSchoolList();
// 初始化地区
initProvince();
function getSchoolList(){
$.ajax({
url: '',
type: 'get',
success: function (res) {
if(res.code == 0){
// 渲染学校列表
}
}
})
}
function initProvince(){
$.ajax({
url: '',
type: 'get',
success: function (res) {
if(res.code == 0){
// 渲染地区列表
}
}
})
}
// 学校列表click事件
$('.table_list_wrapper').on('click', '.table_list_item', function () {
//
})
// 输入框搜索
$('.report_input').on('keyup', function () {
var val = $(this).val();
if(val){
// 调用方法 筛选
}
})
// 搜索按钮
$('#searchReport').on('click', function () {
var val = $('.report_input').val();
if(val){
// 调用方法 筛选
}
})
// 地区选择
$('.area_wrap').on('click', '.proItem', function () {
$('.proItem').removeClass('active')
$(this).addClass('active');
var areaId = $(this).attr('id');
// 调用方法 筛选
})
})

2
assets_v2/js/clientSet/jquery-3.6.0.min.js
View File

File diff suppressed because one or more lines are too long

33
clientCommon/header.html
View File

@ -1,33 +0,0 @@
<!--header公共组件-->
<header class="header-wrapper flex-between-center">
<div class="hleft flex-left-center">
<img src="./assets_v2/images/newai/logo.png" id="hlogo" alt="noimg"/>
<img src="./assets_v2/images/newai/leftmenu.png" id="hmenu-btn" alt="noimg"/>
</div>
<div class="hright">
<ul class="flex-between-center">
<li class="active" tab="index">
<span>
首页
<div></div>
</span>
</li>
<li class="esout"><span>
写作神器
<div></div>
</span></li>
<li class="esout"><span>
论文查重
<div></div>
</span></li>
<li class="esout"><span>
我的报告
<div></div>
</span></li>
</ul>
</div>
<div class="hide" id="headertab">index</div>
<div class="hide content_wrapper"></div>
</header>
<div class="header-hcon"></div>
<!--header公共组件-->

0
clientCommon/kefu.html
View File

4
clientSet/footer.html
View File

@ -0,0 +1,4 @@
<div class="leftSideFooterNew">
<p>Copyright &copy;2012-{$smarty.now|date_format:'%Y'} .</p>
<p><span>All Rights Reserved</span> {if $_siteinfo.company_name}&emsp;{$_siteinfo.company_name}{/if}{if $webbeian}&emsp;{$webbeian}{/if}</p>
</div>

128
clientSet/header.html
View File

@ -0,0 +1,128 @@
<!--header公共组件-->
<style>
body {
font-size: 14px;
line-height: 18px;
font-family: Microsoft YaHei UI;
font-weight: normal;
color: var(--white-text-color);
margin: 0;
padding: 0;
}
.flex {
display: flex;
display: -ms-flexbox;
justify-content: space-between;
align-items: center;
}
.flex-left-center {
display: flex;
display: -ms-flexbox;
align-items: center;
}
.flex-between-center {
display: flex;
display: -ms-flexbox;
justify-content: space-between;
align-items: center;
}
.hide {
display: none;
}
.over {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
.header-wrapper {
background: var(--header-bg);
height: 60px;
padding: 0 30px;
overflow: hidden;
display: flex;
display: -ms-flexbox;
min-width: 1028px;
box-sizing: border-box;
position: fixed;
width: 100%;
z-index: 888889;
transition: height 0.3s ease;
transition: background 0.3s ease;
}
.header-wrapper .hleft{
gap: 24px;
}
.header-wrapper .hright{
color: #3F62F6;
}
.header-hcon {
width: 100%;
height: 60px;
opacity: 0;
}
.header-wrapper #hlogo {
height: 30px;
cursor: pointer;
}
.header-wrapper .hleft-menu-item {
width: 80px;
height: 36px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px 12px;
border-radius: 4px;
color: #3D3D3D;
box-sizing: border-box;
cursor: pointer;
}
.header-wrapper .hleft-menu-item.active {
background: #F4F5FA;
font-weight: bold;
color: #3F62F6;
}
</style>
<header class="header-wrapper flex-between-center">
<div class="hleft flex-left-center">
<img src="../assets_v2/images/clientSet/logo.png" id="hlogo" alt="noimg" />
<div class="hleft-menu-item active">排版</div>
<div class="hleft-menu-item">下载</div>
</div>
<div class="hright">
未找到适用模板？点此收录
</div>
<div class="hide" id="headertab">index</div>
<div class="hide content_wrapper"></div>
</header>
<div class="header-hcon"></div>
<!--header公共组件-->
{literal}
<script>
var pathname = location.pathname;
if (pathname != '/' && pathname != '/report2') {
$('.hleft .hleft-menu-item').removeClass('active');
$('.hleft .hleft-menu-item').eq(1).addClass('active')
}
$('#hlogo').click(function () {
window.location.href = "/";
});
$('.hright').click(function () {
window.location.href = '/suibianxiede';
});
</script>
{/literal}

315
clientSet/kefu.html
View File

@ -0,0 +1,315 @@
{literal}
<style>
.checkQctiveLi{
right: -12px;
position: absolute;
cursor: pointer;
z-index: 6;
}
.kefuComStyle2,.kefuComStyle .kefuhoverstyle{
opacity: 0.7;
}
.kefuComStyle:hover{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.kefuComStyle2:hover,.kefuComStyle:hover .kefuhoverstyle{
opacity: 1;
}
.faqBoxCon {
width: 52px;
height: 52px;
cursor: pointer;
background: #fff;
box-shadow: 0px 3px 19px 0px rgba(0, 0, 0, 0.02), 0px 2px 9px 0px rgba(0, 0, 0, 0.08);
font-size: 14px;
text-align: center;
border-radius: 10px;
position: relative;
margin-bottom: 6px;
}
.faqBoxCon .FaqLayer {
width: 475px;
height: 517px;
position: absolute;
left: -480px;
color: #333333;
top: -300px;
text-align: left;
cursor: default;
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
display: none;
}
.faqBoxCon .FaqLayer .faqConHead {
width: 475px;
height: 73px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #F3F8FF 31%, #FFFFFF 98%);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.faqConHead img {
width:22px;
}
.faqConHead span {
font-size: 20px;
font-weight: bold;
line-height: normal;
letter-spacing: normal;
color: #1E2226;
margin-left:12px;
}
.faqBoxCon .FaqLayer .faqConBox {
border-radius: 12px;
background: #fff;
padding: 0px 12px 20px 22px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems {
height: 420px;
overflow-y: auto;
padding-right: 10px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem {
margin-bottom: 12px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqQuestion {
color: #333333;
font-weight: bold;
font-size: 13px;
cursor: pointer;
position: relative;
padding-left: 30px;
line-height: 22px;
top: 1px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqQuestion span.faqQuestionNum {
width: 24px;
height: 24px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
z-index: 0;
border-radius: 50px;
background: #F2F7FF;
box-sizing: border-box;
border: 2px solid rgba(0, 106, 255, 0.4);
color: #006AFF;
position: absolute;
left: 0;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqQuestion .faqQuestionTitle {
width: 354px;
margin-right: 4px;
margin-left: 4px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
font-size: 16px;
font-weight: normal;
color: #1E2226;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqQuestion span.getAnswer {
display: inline-block;
width: 16px;
height: 16px;
background: url("/images/ai2/rightwards.png") no-repeat;
background-size: contain;
position: absolute;
right: 0;
top: 7px;
transition: background 0.3s;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqAnswer {
display: none;
overflow: hidden;
margin-top: 8px;
cursor: default;
font-size: 14px;
font-weight: normal;
line-height: 18px;
letter-spacing: 1px;
font-size: 14px;
color: #747779;
border-radius: 6px;
background: #F5F6F6;
padding:10px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem .faqAnswer.defaultShow {
display: block;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem.activePr .faqQuestion span.faqQuestionTitle {
white-space: pre-wrap;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem.activePr .faqQuestion span.getAnswer {
background: url('/images/ai2/downward.png') no-repeat;
background-size: contain;
top: 6px;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems .faqConItem.activePr .faqAnswer .redText {
color: #d70000;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #A2A2A2;
}
.faqBoxCon .FaqLayer .faqConBox .faqConItems::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.faqBoxCon .FaqLayer:after {
content: '';
position: absolute;
height: 100%;
width: 16px;
top: 0;
right: -14px;
}
.faqBoxCon:hover .FaqLayer {
display: block;
}
</style>
{/literal}
<div class="kefuComNew">
<ul>
{if $xcx_qrcode}
<li class="kefuWxLi kefuComStyle mobile" style="margin-bottom: 20px;">
<img class="kefuhoverstyle" src="{$smarty.const.CSS_URL}/images/ai2/mobile_logo.png" alt="">
<p class="kefuWx">手机端</p>
<div class="wxkefuImg">
<img src="{$xcx_qrcode}" alt="" style="width:110px">
<p>小程序二维码</p>
</div>
</li>
{/if}
{if $faqs}
<div class="faqBox">
<div class="faqBoxCon">
<img src="{$smarty.const.CSS_URL}/images/ai2/question.png" alt="" style="width:22px;display: block;margin: 0px auto 2px;padding-top: 6px;">
<span style="color: #8C919D;font-size: 12px;line-height: 12px;font-weight: normal;">常见问题</span>
<div class="FaqLayer">
<div class="faqConHead"><img src="{$smarty.const.CSS_URL}/images/ai2/question.png" alt=""><span>常见问题</span></div>
<div class="faqConBox">
<div class="faqConItems">
{foreach from=$faqs key=key item=item}
<div class="faqConItem">
<p class="faqQuestion">
<span class="faqQuestionNum">{$key+1}</span>
<span class="faqQuestionTitle">{$item.q}</span>
<span class="getAnswer"></span>
</p>
<p class="faqAnswer">{$item.a}</p>
</div>
{/foreach}
</div>
</div>
</div>
</div>
</div>
{/if}
{if $qq_qrcode}
<li class="kefuWxLi kefuComStyle">
<img class="kefuhoverstyle" src="{$smarty.const.CSS_URL}/assets_v2/img/newai/qq.png" alt="">
<p class="kefuWx">QQ咨询</p>
<div class="wxkefuImg" {if $kefuqq}style="height:165px"{/if}>
<img src="{$qq_qrcode}" alt="" style="width:110px">
<p>QQ扫码，添加客服</p>
{if $kefuqq}<p>QQ:{$kefuqq}</p>{/if}
</div>
</li>
{elseif $kefuqq}
<li class="kefuComStyle kefuComStyle2">
<a target="blank" class="qq" rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin={$kefuqq}&site={$sitename}&menu=yes">
<img src="{$smarty.const.CSS_URL}/assets_v2/img/newai/qq.png" alt="">
<p class="kefuQq">QQ咨询</p>
</a>
</li>
{/if}
{if $check_wxqrcode}
<li class="kefuWxLi kefuComStyle">
<img class="kefuhoverstyle" src="{$smarty.const.CSS_URL}/assets_v2/img/newai/wx.png" alt="">
<p class="kefuWx">微信咨询</p>
<div class="wxkefuImg">
<img src="{$check_wxqrcode}" alt="" style="width:110px">
<p>微信扫码，添加客服</p>
</div>
</li>
{/if}
<!-- <li class="activeIndex">
<img src="{$smarty.const.CSS_URL}/images/ai/wx.png" alt="">
</li> -->
{if $show_active_nav}
<li class="kefutoTop" style="overflow: hidden;">
<img style="display: block;width:14px;" src="{$smarty.const.CSS_URL}/assets_v2/img/newai/top.png" alt="">
</li>
{/if}
</ul>
<!-- {if $show_active_nav}
<img class="checkQctiveLi" src="{$smarty.const.CSS_URL}/images/ai/index/right_active.png" alt="">
{/if} -->
</div>
{literal}
<script>
$('.checkQctiveLi').click(function(){
location.href="/modelessay";
});
$('.kefutoTop').click(function(){
var top = document.documentElement.scrollTop || document.body.scrollTop;
//实现滚动效果
var timeTop = setInterval(function(){
document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
if (top <= 0) {
clearInterval(timeTop);
}
}, 10);
});
$(".faqConItem").on('click',function (){
if($(this).hasClass('activePr')){
$(".faqConItem").removeClass('activePr')
$(".faqAnswer").stop(false,true).slideUp(100)
return
}
$(".faqAnswer").stop(false,true).slideUp(100)
$(".faqConItem").removeClass('activePr')
$(this).addClass('activePr')
$($(this).find('.faqAnswer')).stop(false,true).slideDown(100)
})
$(".mobile").hover(function(){
$(".mobile > img").attr("src", "/images/ai2/mobile_logo_hover.png");
},function(){
$(".mobile > img").attr("src", "/images/ai2/mobile_logo.png");
});
$(".faqBoxCon").hover(function(){
$(".faqBoxCon > img").attr("src", "/images/ai2/question_hover.png");
},function(){
$(".faqBoxCon > img").attr("src", "/images/ai2/question.png");
});
</script>
{/literal}

286
home.html
View File

@ -0,0 +1,286 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{if $sitename}{$sitename}{else}一键生成万字{if !$is_filter_lunwen}论文{/if}范文{/if}</title>
<meta name="keywords" content="{$sitekeywords}">
<meta name="description" content="{$sitedesc}">
{if $site_ico}
<link rel="shortcut icon" href="{$site_ico}" type="image/x-icon" />{/if}
<link rel="stylesheet" type="text/css" href="{$smarty.const.CSS_URL}/assets_v2/css/clientSet/normalize.css?v={$smarty.const.CSS_JS_VERSION}"/>
<link rel="stylesheet" type="text/css" href="{$smarty.const.CSS_URL}/assets_v2/css/clientSet/common.css?v={$smarty.const.CSS_JS_VERSION}3"/>
<link rel="stylesheet" type="text/css" href="{$smarty.const.CSS_URL}/assets_v2/css/clientSet/index.css?v={$smarty.const.CSS_JS_VERSION}3"/>
<script type="text/javascript" src="{$smarty.const.CSS_URL}/assets_v2/js/clientSet/jquery-3.6.0.min.js?v={$smarty.const.CSS_JS_VERSION}"></script>
<script src="{$smarty.const.CSS_URL}/assets_v2/js/clientSet/css-vars-ponyfill.min.js"></script>
<script type="text/javascript" src="./assets_v2/js/clientSet/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./assets_v2/js/clientSet/home.js"></script>
<!--[if lt IE 9]>
<script src="{$smarty.const.CSS_URL}/assets_v2/js/newai/html5shiv.js"></script>
<script src="{$smarty.const.CSS_URL}/assets_v2/js/newai/respond.min.js"></script>
<![endif]-->
{literal}
<style>
body{
background: #F3F5FE;
}
.flex{
display: flex;
}
.homePage-wrap{
display: flex;
justify-content: center;
margin:81px 0 54px 0;
}
.homePage-wrap img{
width: 512px;
height: 97px;
}
#container{
min-width: 1180px;
overflow-x: auto;
height: auto;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 需要迁移 */
.bg{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
display: -ms-flexbox;
background: #F2F7FF;
z-index: -1;
}
.bg .index_banner{
position: absolute;
left: 0;
width: 100%;
height: auto;
top: 0px;
z-index:1;
}
.home-search-wrap{
min-width: 1180px;
max-width: 1180px;
min-height: 171px;
display: flex;
flex-direction: column;
padding: 24px 32px;
gap: 24px;
box-sizing: border-box;
background: #fff;
}
.formItem{
gap: 32px;
align-items: baseline;
}
.formItem .form-label{
font-weight: bold;
color: #333333;
min-width: 34px;
}
.formItem .form-content{
display: flex;
gap:9px 16px;
flex-wrap: wrap;
font-size: 14px;
color: #333333;
}
.formItem .form-content .proItem{
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
}
.formItem .form-content .active{
background: #3F62F6;
color: #fff;
}
.formItem .form-content.search_report {
width: 500px;
height: 38px;
font-size: 14px;
color: #3D3D3D;
border-radius: 6px;
background: #FFFFFF;
background: rgba(255, 255, 255, 0.4);
border: 1px solid #DFE2E6;
padding: 10px 12px;
display: flex;
align-items: center;
transition: all .3s ease;
box-sizing: border-box;
}
#searchReport{
font-family: Microsoft YaHei UI;
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.08em;
color: #3F62F6;
}
.formItem .search_report .report_input {
color: #3D3D3D;
margin-right: 10px;
flex: 1;
border: none;
}
.formItem .search_report .report_input+span {
color: #CBD5E2;
}
.formItem .search_report .report_input::placeholder {
color: #8C919D;
}
.formItem .search_report .report_input:focus-visible {
outline: none;
}
.table_list_wrapper{
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 12px 13px;
justify-content: flex-start;
}
.table_list_item{
align-items: center;
width: 286px;
height: 74px;
display: flex;
padding: 16px;
box-sizing: border-box;
border-radius: 6px;
background: #FFFFFF;
gap: 12px;
cursor: pointer;
}
.table_list_item .short_name{
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
background: #EFF4FF;
font-family: MiSans;
font-size: 16px;
font-weight: bold;
line-height: 24px;
letter-spacing: normal;
color: #3F62F6;
}
.table_list_item .name{
font-size: 16px;
font-weight: normal;
line-height: 24px;
letter-spacing: normal;
color: #333333;
}
.table_list_item:hover .name{
cursor: pointer;
font-weight: bold;
color: #3F62F6;
transition: all .3s;
}
</style>
{/literal}
</head>
<body>
<!--header公共组件-->
<!-- {include file="include/newai/header.html" hideaimenu="1"} -->
<!--header公共组件-->
<div id="container">
<div class="bg">
<img class="index_banner" src="./assets_v2/images/clientSet/home_back.png"/>
</div>
<!-- 页面版头start -->
<div class="homePage-wrap">
<img src="./assets_v2/images/clientSet/home-page-title.png"/>
</div>
<!-- 页面版头end -->
<!-- 筛选条件 start -->
<div class="home-search-wrap">
<div class="formItem flex">
<div class="form-label">
学校
</div>
<div class="form-content search_report">
<input class="report_input" type="text" placeholder="搜索学校名称">
<span>｜</span>
<span id="searchReport" class="point">搜索</span>
</div>
</div>
<div class="formItem flex">
<div class="form-label">
地区
</div>
<div class="form-content area_wrap">
<span class="proItem active">全部</span>
<span class="proItem">北京市</span>
<span class="proItem">北京市</span>
</div>
</div>
</div>
<!-- 筛选条件 end -->
<!-- 服务列表开始 -->
<div class="table_list_wrapper flex">
<div class="table_list_item flex">
<div class="short_name flex">清</div>
<div class="name">清华大学</div>
</div>
<div class="table_list_item flex">
<div class="short_name flex">北</div>
<div class="name">北京大学</div>
</div>
<div class="table_list_item flex">
<div class="short_name flex">厦</div>
<div class="name">厦门大学</div>
</div>
<div class="table_list_item flex">
<div class="short_name flex">厦</div>
<div class="name">厦门大学</div>
</div>
</div>
<!-- 服务列表结束 -->
<!-- {include file="include/newai/footer.html"} -->
</div>
<div id="tab_hide" class="hide">1</div>
<!-- {include file="include/newai/kefu.html"}
{$access_stats_code} -->
</body>
<script type="text/javascript" src="{$smarty.const.CSS_URL}/assets_v2/js/clientSet/rem.js"></script>
<script type="text/javascript" src="{$smarty.const.CSS_URL}/assets_v2/js/clientSet/common.js"></script>
<script type="text/javascript" src="{$smarty.const.CSS_URL}/assets_v2/js/clientSet/home.js?v=10"></script>
{literal}
<script>
</script>
{/literal}
</html>

6
index.html
View File

@ -7,5 +7,11 @@
</head>
<body>
<div>首页</div>
<div class="search_report">
<span>订单编号：</span>
<input class="report_input" type="text" placeholder="请输入您的订单号来查找报告">
<span>｜</span>
<span id="searchReport" class="point">查找报告</span>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save