update
This commit is contained in:
toom1996
@ -114,7 +114,7 @@ import '../styles/template_3/style.css'
|
||||
</div>
|
||||
|
||||
<div class="col-span-1">
|
||||
<h4 class="font-semibold text-gray-100 uppercase">Company</h4>
|
||||
<h4 class="font-semibold text-gray-100 uppercase">关于我们</h4>
|
||||
|
||||
<div class="mt-6 grid space-y-3">
|
||||
<p><a class="inline-flex gap-x-2 text-base text-gray-300 hover:text-gray-400 transition-all duration-300" href="/about-us">关于我们</a></p>
|
||||
|
||||
196
src/layouts/Layout_4.astro
Normal file
196
src/layouts/Layout_4.astro
Normal file
@ -0,0 +1,196 @@
|
||||
---
|
||||
const { description = '', title = '', keywords = '', breadcrumb = [] } = Astro.props;
|
||||
import {getConfig, getTp4Extra} from '../../utils/config'
|
||||
import { Image } from 'astro:assets';
|
||||
const config = getConfig(Astro)
|
||||
const extra = getTp4Extra(config.app_extra_tag)
|
||||
import BaijiahaoLogo from '../../public/common/baijiahao.svg'
|
||||
import Toutiaohao from '../../public/common/toutiaohao.svg'
|
||||
import Douyin from '../../public/common/douyin.svg'
|
||||
import Weibo from '../../public/common/weibo.svg'
|
||||
|
||||
import '../styles/common/main.css'
|
||||
import '../styles/template_4/bootstrap.min.css'
|
||||
import '../styles/template_4/responsive.css'
|
||||
import '../styles/template_4/style.css'
|
||||
import '../styles/template_4/meanmenu.css'
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="applicable-device"content="pc,mobile">
|
||||
<link rel="icon" type="image/svg+xml" href={config.app_logo} />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="keywords" content={keywords} />
|
||||
{config.app_baidu_zhanzhang ? <Fragment set:html={config.app_baidu_zhanzhang} /> : ''}
|
||||
</head>
|
||||
|
||||
|
||||
<!-- HEADER START -->
|
||||
<header>
|
||||
<div id="header-sticky" class="header-area transparent-header pt-10 pb-10">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-2 col-lg-2 col-md-4 col-10 d-flex align-items-center">
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<Image src={config.app_logo} alt='logo' width={40} height={40}/>
|
||||
<!-- <img src="assets/img/logo/logo.png" alt=""> -->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-10 col-lg-10 col-md-7 col-8 d-none d-md-block">
|
||||
<div class="main-menu colormenu d-block">
|
||||
<nav id="mobile-menu">
|
||||
<ul>
|
||||
<li><a href="/">首页</a></li>
|
||||
<li><a href="/about-us">关于我们</a></li>
|
||||
<li><a href="/news">新闻专栏</a></li>
|
||||
<li><a href="/contact-us">联系我们</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 col-md-1">
|
||||
<div class="side-menu-icon d-lg-none text-end">
|
||||
<button class="side-toggle">顶顶顶顶顶</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- HEADER END -->
|
||||
<div class="fix">
|
||||
<div class="side-info">
|
||||
<button class="side-info-close"><i class="fal fa-times"></i></button>
|
||||
<div class="side-info-content">
|
||||
<div class="mobile-menu mean-container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="offcanvas-overlay"></div>
|
||||
|
||||
|
||||
<slot />
|
||||
|
||||
<!-- FOOTER START -->
|
||||
<div class="footer-area">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-lg-2 col-md-4">
|
||||
<div class="footer_logo">
|
||||
<!-- <img src="/template_4/images/logo/logo.png" alt="logo"/> -->
|
||||
<Image src={config.app_logo} alt='logo' width={40} height={40}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-lg-2 col-md-4">
|
||||
<div class="footer_widget_design wow fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
|
||||
<div class="link_heading">
|
||||
<h3 class="link_heading">网站链接</h3>
|
||||
</div>
|
||||
<div class="links">
|
||||
<ul>
|
||||
<li><a href="/">首页 </a></li>
|
||||
<li><a href="/about-us">关于我们</a></li>
|
||||
<li><a href="/contact-us">联系我们</a></li>
|
||||
<li><a href="/news">新闻产品资讯</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-2 col-md-4">
|
||||
<div class="footer_widget_design wow fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
|
||||
<div class="link_heading">
|
||||
<h3 class="link_heading linkspecail">办公地址</h3>
|
||||
</div>
|
||||
<div class="links special_widget_tp">
|
||||
<ul>
|
||||
<li><a href="/contact"><i class="far fa-map-marker-alt"></i><span class="tp-spaceing">{extra.app_location}</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer_widget_design wow fadeInUp" data-wow-duration="2s" data-wow-delay=".2s">
|
||||
<div class="link_heading">
|
||||
<h3 class="link_heading linkspecail">联系电话</h3>
|
||||
</div>
|
||||
<div class="links special_widget_tp">
|
||||
<ul>
|
||||
<li><a href={`tel:${extra.app_phone}`}><i class="fad fa-phone-alt"></i>{extra.app_phone}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer_bottom pt-60 pb-15">
|
||||
<div class="container tp-border">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6">
|
||||
<div class="copyright_text pt-20">
|
||||
<p>2025© {config.app_name} - {config.app_company}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6">
|
||||
<div class="footer_social f-right">
|
||||
<span>关注我们</span>
|
||||
{
|
||||
extra.weibo_offical.address ?
|
||||
<a class="follow-icon" href={extra.weibo_offical.address}>
|
||||
<Weibo height={25} width={25} />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.douyin_offical.address ?
|
||||
<a class="follow-icon" href={extra.douyin_offical.address}>
|
||||
<Douyin height={25} width={25} />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.baijiahao_offical.address ?
|
||||
<a class="follow-icon" href={extra.baijiahao_offical.address}>
|
||||
<BaijiahaoLogo height={25} width={25} />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.toutiaohao_offical.address ?
|
||||
<a class="follow-icon" href={extra.toutiaohao_offical.address}>
|
||||
<Toutiaohao height={25} width={25} />
|
||||
</a> : ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FOOTER END -->
|
||||
<!-- JS here -->
|
||||
<script is:inline src="/template_4/js/vendor/modernizr-3.5.0.min.js"></script>
|
||||
<script is:inline src="/template_4/js/vendor/jquery-1.12.4.min.js"></script>
|
||||
<script is:inline src="/template_4/js/popper.min.js"></script>
|
||||
<script is:inline src="/template_4/js/bootstrap.min.js"></script>
|
||||
<script is:inline src="/template_4/js/owl.carousel.min.js"></script>
|
||||
<script is:inline src="/template_4/js/isotope.pkgd.min.js"></script>
|
||||
<script is:inline src="/template_4/js/one-page-nav-min.js"></script>
|
||||
<script is:inline src="/template_4/js/slick.min.js"></script>
|
||||
<script is:inline src="/template_4/js/jquery.meanmenu.min.js"></script>
|
||||
<script is:inline src="/template_4/js/ajax-form.js"></script>
|
||||
<script is:inline src="/template_4/js/wow.min.js"></script>
|
||||
<script is:inline src="/template_4/js/jquery.scrollUp.min.js"></script>
|
||||
<script is:inline src="/template_4/js/imagesloaded.pkgd.min.js"></script>
|
||||
<script is:inline src="/template_4/js/jquery.magnific-popup.min.js"></script>
|
||||
<script is:inline src="/template_4/js/plugins.js"></script>
|
||||
<script is:inline src="/template_4/js/main.js"></script>
|
||||
</html>
|
||||
<style>
|
||||
.follow-icon {
|
||||
text-decoration: none;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
</style>
|
||||
153
src/layouts/Layout_5.astro
Normal file
153
src/layouts/Layout_5.astro
Normal file
@ -0,0 +1,153 @@
|
||||
---
|
||||
const { description = '', title = '', keywords = '', breadcrumb = [] } = Astro.props;
|
||||
import {getConfig, getTp5Extra} from '../../utils/config'
|
||||
import { Image } from 'astro:assets';
|
||||
const config = getConfig(Astro)
|
||||
const extra = getTp5Extra(config.app_extra_tag)
|
||||
import BaijiahaoLogo from '../../public/common/baijiahao.svg'
|
||||
import Toutiaohao from '../../public/common/toutiaohao.svg'
|
||||
import Douyin from '../../public/common/douyin.svg'
|
||||
import Weibo from '../../public/common/weibo.svg'
|
||||
|
||||
import '../styles/common/main.css'
|
||||
import '../styles/template_5/bootstrap.min.css'
|
||||
import '../styles/template_5/style.css'
|
||||
import '../styles/template_5/responsive.css'
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="applicable-device"content="pc,mobile">
|
||||
<link rel="icon" type="image/svg+xml" href={config.app_logo} />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="keywords" content={keywords} />
|
||||
{config.app_baidu_zhanzhang ? <Fragment set:html={config.app_baidu_zhanzhang} /> : ''}
|
||||
</head>
|
||||
|
||||
<div class="banner_outer">
|
||||
<header>
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<a class="navbar-brand" href="/"><figure class="mb-0"><Image src={config.app_logo} alt="" height={40} width={40} class="img-fluid"></figure></a>
|
||||
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="/">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/news">产品动态</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/about-us">关于我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/contact-us">联系我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link try_free_btn" href={extra.app_download}>立即下载</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<figure class="mb-0 bannersidelayer">
|
||||
<img src="./template_5/images/banner-sidelayer.png" alt="">
|
||||
</figure>
|
||||
<!-- Banner -->
|
||||
<slot name="banner-slot" />
|
||||
</div>
|
||||
<slot />
|
||||
<!-- Footer -->
|
||||
<section class="footer-section">
|
||||
<div class="container">
|
||||
<div class="middle-portion">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
|
||||
<div class="icons">
|
||||
<!-- <a href="./index.html">
|
||||
<figure class="footer-logo">
|
||||
<img src="./template_5/images/footer-logo.png" alt="">
|
||||
</figure>
|
||||
</a> -->
|
||||
<p>官方账号</p>
|
||||
<ul class="list-unstyled mb-0">
|
||||
{
|
||||
extra.weibo_offical.address ?
|
||||
<a class="follow-icon" href={extra.weibo_offical.address}>
|
||||
<Weibo height={25} width={25} />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.douyin_offical.address ?
|
||||
<a class="follow-icon" href={extra.douyin_offical.address}>
|
||||
<Douyin height={25} width={25} />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.baijiahao_offical.address ?
|
||||
<a class="follow-icon" href={extra.baijiahao_offical.address}>
|
||||
<BaijiahaoLogo height={25} width={25} />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.toutiaohao_offical.address ?
|
||||
<a class="follow-icon" href={extra.toutiaohao_offical.address}>
|
||||
<Toutiaohao height={25} width={25} />
|
||||
</a> : ''
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6 col-12 d-sm-block">
|
||||
<div class="links">
|
||||
<h3 class="heading">新闻专栏</h3>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li><a href="/news" class=" text text-decoration-none">产品动态</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6 col-12 d-md-block">
|
||||
<div class="links">
|
||||
<h3 class="heading">关于我们</h3>
|
||||
<ul class="list-unstyled mb-0">
|
||||
<li><a href="/about-us" class=" text text-decoration-none">关于我们</a></li>
|
||||
<li><a href="/contact-us" class=" text text-decoration-none">联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-lower">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<p class="mb-0 text-size-18">© 2025© {config.app_name} - {config.app_company}<a href={config.app_filing_url}>{config.app_filing}</a></p>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12 d-md-block d-none">
|
||||
<!-- <p class="mb-0 term text-size-18">Term of Use | Privacy Policy</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script is:inline src="/template_5/js/jquery-3.6.0.min.js"> </script>
|
||||
<script is:inline src="/template_5/js/bootstrap.min.js"> </script>
|
||||
<script is:inline src="/template_5/js/video_link.js"></script>
|
||||
<script is:inline src="/template_5/js/video.js"></script>
|
||||
<script is:inline src="/template_5/js/counter.js"></script>
|
||||
<script is:inline src="/template_5/js/custom.js"></script>
|
||||
<script is:inline src="/template_5/js/animation_links.js"></script>
|
||||
<script is:inline src="/template_5/js/animation.js"></script>
|
||||
</html>
|
||||
|
||||
@ -255,7 +255,7 @@ const breadcrumb = [{
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<img src="template_3/feature-iphone.png" class="h-[600px] rounded-xl mx-auto"
|
||||
<img src="template_3/feature-iphone.png" class="h-auto rounded-xl mx-auto"
|
||||
alt="feature-image">
|
||||
</div>
|
||||
|
||||
|
||||
144
src/pages/template/4/about-us.astro
Normal file
144
src/pages/template/4/about-us.astro
Normal file
@ -0,0 +1,144 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_4.astro";
|
||||
import { getConfig, getExtra, getTp4Extra } from "../../../../utils/config";
|
||||
import {
|
||||
TP2_COLUMN_ABOUT_US,
|
||||
TP2_COLUMN_ABOUT_US_URL,
|
||||
TP2_COLUMN_INDEX,
|
||||
TP2_COLUMN_INDEX_URL,
|
||||
} from "../../../../utils/const";
|
||||
const config = getConfig(Astro);
|
||||
const extra = getTp4Extra(config.app_extra_tag);
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={TP2_COLUMN_ABOUT_US + ` - ${config.app_name}`}
|
||||
description={`关于我们 - ${config.app_name}`}
|
||||
keywords={config.app_keywords}
|
||||
>
|
||||
<div id="content" class="main" data-site="中国">
|
||||
<main>
|
||||
<div>
|
||||
<!-- 活动与新闻-->
|
||||
<div class="hcomponent-page-info">
|
||||
<div class="news-detail-title">
|
||||
<div class="container-custom fix-p-color">
|
||||
<h1><span>{extra.about_us.title}{config.app_name}</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-custom hcomponent-share-bar">
|
||||
<div class="container-custom">
|
||||
<ul class="share-box list-unstyled hasLine">
|
||||
<li class="line"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div >
|
||||
<div class="hcomponent-news-detail-content">
|
||||
<div class="news-detail-box container-custom clearfix">
|
||||
<div class="news-detail-content">
|
||||
<Fragment set:html={extra.about_us.content} />
|
||||
<p style="text-align: right;">{config.app_company}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.main {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 0%;
|
||||
padding: 5rem;
|
||||
margin: 0px auto;
|
||||
padding-top: 5rem;
|
||||
h1 {
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 1em;
|
||||
line-height: 1.95em;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
@media (max-width:767px) {
|
||||
.container-custom>.container-custom {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mt20{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.main .bottom-box .share-box {
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.main .share-box {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
.share-box.list-unstyled:not(.hasLine){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.main .share-box li .wechat-qrcode {
|
||||
top: 30px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.main .share-box li .wechat-qrcode p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main .hasLine .line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dddddd;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.main .share-box.s-bottom {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.news-detail-box {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
216
src/pages/template/4/contact-us.astro
Normal file
216
src/pages/template/4/contact-us.astro
Normal file
@ -0,0 +1,216 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_4.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import { getConfig, getExtra, getTp4Extra } from "../../../../utils/config";
|
||||
import {
|
||||
TP2_COLUMN_CONTACT_US,
|
||||
TP2_COLUMN_CONTACT_US_URL,
|
||||
TP2_COLUMN_INDEX,
|
||||
TP2_COLUMN_INDEX_URL,
|
||||
} from "../../../../utils/const";
|
||||
import BaijiahaoLogo from '../../../../public/common/baijiahao.svg'
|
||||
import Toutiaohao from '../../../../public/common/toutiaohao.svg'
|
||||
import Douyin from '../../../../public/common/douyin.svg'
|
||||
import Youxiang from '../../../../public/common/youxiang.svg'
|
||||
const config = getConfig(Astro);
|
||||
const extra = getTp4Extra(config.app_extra_tag)
|
||||
const breadcrumb = [
|
||||
{ title: TP2_COLUMN_INDEX, url: TP2_COLUMN_INDEX_URL },
|
||||
{ title: TP2_COLUMN_CONTACT_US, url: TP2_COLUMN_CONTACT_US_URL }
|
||||
];
|
||||
// 页面描述
|
||||
const desc = extra.contact_us.telephone.map(item => item.number).join('; ');
|
||||
---
|
||||
<Layout
|
||||
title={TP2_COLUMN_CONTACT_US + ` - ${config.app_name}`}
|
||||
description={`${config.app_name}24小时客服电话 - ${desc}`}
|
||||
keywords={config.app_keywords}
|
||||
breadcrumb={breadcrumb}
|
||||
>
|
||||
<main>
|
||||
<div class="contact-container">
|
||||
<h1 style="font-size: 5rem;margin-bottom: 5rem;">{extra.contact_us.title}</h1>
|
||||
<!-- <Fragment set:html={extra.contact_us.content}/> -->
|
||||
<section class="list-box">
|
||||
<h2 class="list-title">在线客服</h2>
|
||||
<ul>
|
||||
{
|
||||
extra.contact_us.telephone.map(e => {
|
||||
return <li class="list-item">
|
||||
<a href={`tel:${e.number}`}>
|
||||
<div class="item-content">
|
||||
<Image height={50} width={50} src="/template_2/contact-us/hotline.png" alt="联系热线"/>
|
||||
<div class="txt">
|
||||
<h3 style="margin-left: 1rem;font-weight: bold;">{e.number}</h3>
|
||||
<h4 style="margin-left: 1rem;">24小时全国热线</h4>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
||||
{extra.contact_us.email.length > 0 ? <h2 class="list-title">联系邮箱</h2> : ''}
|
||||
<ul>
|
||||
{
|
||||
extra.contact_us.email.map(e => {
|
||||
return <li class="list-item">
|
||||
<a href={`tel:${e.address}`}>
|
||||
<div class="item-content">
|
||||
<Image height={50} width={50} src="/template_2/contact-us/youxiang.svg" alt="联系邮箱"/>
|
||||
<div class="txt">
|
||||
<h3 style="margin-left: 1rem;font-weight: bold;">{e.address}</h3>
|
||||
<h4 style="margin-left: 1rem;"></h4>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
||||
<h2 class="list-title">官方媒体平台</h2>
|
||||
<ul>
|
||||
{
|
||||
extra.weibo_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.weibo_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<span class="icon-lazy font-ico-weibo" data-name="font-ico-weibo"></span>
|
||||
<div class="txt">
|
||||
<h3>{extra.weibo_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.gongzhonghao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.gongzhonghao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<span class="icon-lazy font-ico-weixin" data-name="font-ico-weixin"></span>
|
||||
<div class="txt">
|
||||
<h3>{extra.gongzhonghao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.baijiahao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.baijiahao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<BaijiahaoLogo class="icon-lazy" />
|
||||
<div class="txt">
|
||||
<h3>{extra.baijiahao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.toutiaohao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.toutiaohao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<Toutiaohao class="icon-lazy"/>
|
||||
<div class="txt">
|
||||
<h3>{extra.toutiaohao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.douyin_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.douyin_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<Douyin class="icon-lazy"/>
|
||||
<div class="txt">
|
||||
<h3>{extra.douyin_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.fa-chevron-right:before {
|
||||
content: ">"
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem ;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-left: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 1rem;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.icon-lazy {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.contact-container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
border-top: 0.01rem solid #d8d8d8;
|
||||
}
|
||||
|
||||
.item-content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-box .list-item>a {
|
||||
padding: 1.5rem;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* height: 1.08rem; */
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 0%;
|
||||
padding: 5rem;
|
||||
margin: 0px auto;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
</style>
|
||||
313
src/pages/template/4/index.astro
Normal file
313
src/pages/template/4/index.astro
Normal file
@ -0,0 +1,313 @@
|
||||
---
|
||||
import "swiper/swiper-bundle.css";
|
||||
import Layout from "../../../layouts/Layout_4.astro";
|
||||
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
|
||||
import { Image } from 'astro:assets';
|
||||
import { getConfig, getTp4Extra } from "../../../../utils/config";
|
||||
import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from "../../../../utils/const";
|
||||
import { newsIndex } from "../../../../utils/rpc";
|
||||
const config = getConfig(Astro)
|
||||
const extra = getTp4Extra(config.app_extra_tag);
|
||||
const {code, data} = await newsIndex(config.id, 3);
|
||||
|
||||
const breadcrumb = [{
|
||||
title: TP2_COLUMN_INDEX,
|
||||
url: TP2_COLUMN_INDEX_URL
|
||||
}]
|
||||
---
|
||||
<Layout
|
||||
title={`${config.app_name}`}
|
||||
description={config.app_description}
|
||||
keywords={config.app_keywords}
|
||||
breadcrumb={breadcrumb}
|
||||
>
|
||||
|
||||
<main>
|
||||
<div class="app_slider d-flex align-items-center fix">
|
||||
<div class="App_shape-circle">
|
||||
<img class="shapeAbsoulute scale-upOne d-sm-none d-md-block" src="/template_4/images/shape/circle.png" alt=""/>
|
||||
<img class="shape10" src="/template_4/images/shape/shape10.png" alt=""/>
|
||||
<img class="shape13" src="/template_4/images/shape/shape13.png" alt=""/>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
|
||||
<div class="App_shape wow fadeInLeft d-sm-none d-md-block d-none d-sm-block" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInLeft;">
|
||||
<img src="/template_4/images/shape/mainshape.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 d-flex align-items-center">
|
||||
<div class="app_sliderContent">
|
||||
<div class="shapeesright">
|
||||
<img class="shape1" src="/template_4/images/shape/shape1.png" alt=""/>
|
||||
<img class="shape2" src="/template_4/images/shape/shape2.png" alt=""/>
|
||||
<img class="shape3" src="/template_4/images/shape/shape3.png" alt=""/>
|
||||
<img class="shape4" src="/template_4/images/shape/shape4.png" alt=""/>
|
||||
<img class="shape5" src="/template_4/images/shape/shape5.png" alt=""/>
|
||||
<img class="shape6" src="/template_4/images/shape/shape6.png" alt=""/>
|
||||
<img class="shape7" src="/template_4/images/shape/shape7.png" alt=""/>
|
||||
<img class="shape8" src="/template_4/images/shape/shape8.png" alt=""/>
|
||||
<img class="shape9" src="/template_4/images/shape/shape9.png" alt=""/>
|
||||
<img class="shape11" src="/template_4/images/shape/shape5.png" alt=""/>
|
||||
</div>
|
||||
<h2 class="hero-two-title">{extra.sc1.text1}<br> {extra.sc1.text2}</h2>
|
||||
<p>{extra.sc1.text3}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FETURES START -->
|
||||
<div class="homefeture_1 pt-115 pb-130">
|
||||
<div class="container">
|
||||
<div class="app_left_shape">
|
||||
<img class="leftanimation d-none d-sm-block" src="/template_4/images/shape/left.png" alt="leftshape"/>
|
||||
<img src="/template_4/images/shape/shape7.png" alt="leftshape"/>
|
||||
<img class="downsahpe d-none d-sm-block" src="/template_4/images/shape/shape3.png" alt="leftshape"/>
|
||||
</div>
|
||||
<div class="section_title_wrapper text-center wow fadeInUp mb-70" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
|
||||
<h2 class="section-title">{extra.sc2.text1}</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
|
||||
<div class="feabox mb-30">
|
||||
<div class="feabox__img mb-50">
|
||||
<Image src={`/template_4/images/fetures/forma1.svg`} alt="pic" width={80} height={80}/>
|
||||
</div>
|
||||
<div class="feabox__content">
|
||||
<h3 class="feabox-title tcolor0">{extra.sc2.text2}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
|
||||
<div class="feabox mb-30 clr1">
|
||||
<div class="feabox__img img1 mb-50">
|
||||
<img src="/template_4/images/fetures/Forma2.png" alt="form2"/>
|
||||
</div>
|
||||
<div class="feabox__content">
|
||||
<h3 class="feabox-title tcolor1">{extra.sc2.text3}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
|
||||
<div class="feabox mb-30 clr2">
|
||||
<div class="feabox__img img2 mb-50">
|
||||
<img src="/template_4/images/fetures/Forma3.png" alt="form3"/>
|
||||
</div>
|
||||
<div class="feabox__content">
|
||||
<h3 class="feabox-title tcolor2">{extra.sc2.text4}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
|
||||
<div class="feabox mb-30 clr3">
|
||||
<div class="feabox__img img3 mb-50">
|
||||
<img src="/template_4/images/fetures/Forma4.png" alt="form4"/>
|
||||
</div>
|
||||
<div class="feabox__content">
|
||||
<h3 class="feabox-title tcolor3">{extra.sc2.text5}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FETURES END -->
|
||||
|
||||
<!-- APP DETAILS START -->
|
||||
<div class="app_details pb-20">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-7 col-lg-6 col-md-12">
|
||||
<div class="details_content pb-70">
|
||||
<h2 class="section-title section_title_large">{extra.sc3.text1}</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div class="feature3">
|
||||
<div class="feature3__image">
|
||||
<img class="pb-30" src="/template_4/images/service/s7.png" alt="details"/>
|
||||
</div>
|
||||
<div class="feature3__content">
|
||||
<h4 class="content_title">{extra.sc3.text2}</h4>
|
||||
<p>{extra.sc3.text3}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div class="feature3 pl-40">
|
||||
<div class="feature3__image febg1">
|
||||
<img class="pb-30" src="/template_4/images/fetures/s2.png" alt="details"/>
|
||||
</div>
|
||||
<div class="feature3__content">
|
||||
<h4 class="content_title">{extra.sc3.text4}</h4>
|
||||
<p>{extra.sc3.text5}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div class="feature3">
|
||||
<div class="feature3__image febg2">
|
||||
<img class="pb-30" src="/template_4/images/fetures/s3.png" alt="details"/>
|
||||
</div>
|
||||
<div class="feature3__content">
|
||||
<h4 class="content_title">{extra.sc3.text6}</h4>
|
||||
<p>{extra.sc3.text7}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
|
||||
<div class="feature3 pl-40">
|
||||
<div class="feature3__image febg3">
|
||||
<img class="pb-30" src="/template_4/images/fetures/s4.png" alt="details"/>
|
||||
</div>
|
||||
<div class="feature3__content">
|
||||
<h4 class="content_title">{extra.sc3.text8}</h4>
|
||||
<p>{extra.sc3.text9}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-5 col-lg-6 col-lg-6 col-md-12 d-md-none d-lg-block d-sm-none d-md-block d-sm-block">
|
||||
<div class="wow zoomIn" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.2s; animation-name: zoomIn;">
|
||||
<img src="/template_4/images/fetures/mockup.png" alt="blogshape"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- APP DETAILS END -->
|
||||
|
||||
<!-- DOWNLOAD START -->
|
||||
<div class="download-area pt-50 mt-100">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-6 col-md-4 col-sm-12 d-sm-none d-md-block">
|
||||
<div class="download_image">
|
||||
<img class="dw d-none d-sm-block" src="/template_4/images/shape/iphon2.png" alt="download_shape"/>
|
||||
<img class="downloadpos d-md-none d-lg-block d-none d-sm-block" src="/template_4/images/shape/iphone3.png" alt="download_shape"/>
|
||||
<img class="downloadpos2 d-md-none d-lg-block d-none d-sm-block" src="/template_4/images/shape/circle.png" alt="download_shape"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-8 col-sm-12">
|
||||
<div class="download_content pl-105 pt-90">
|
||||
<h2 class="section-title">{extra?.sc4?.text1}</h2>
|
||||
<p>{extra?.sc4?.text2}</p>
|
||||
<div class="download-btn">
|
||||
<a class="tp_download" href={extra?.sc4?.text3}><Image width={50} height={50} alt="huawei-store" src={`/template_4/images/store/huawei.svg`} /></a>
|
||||
<a class="tp_download" href={extra?.sc4?.text4}><Image width={50} height={50} alt="xiaomi-store" src={`/template_4/images/store/xiaomi.svg`} /></a>
|
||||
<a class="tp_download" href={extra?.sc4?.text5}><Image width={50} height={50} alt="tencent-store" src={`/template_4/images/store/tencent.svg`} /></a>
|
||||
<a class="tp_download" href={extra?.sc4?.text6}><Image width={50} height={50} alt="wandoujia-store" src={`/template_4/images/store/wandoujia.svg`} /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- DOWNLOAD END -->
|
||||
|
||||
<div class="blog3">
|
||||
<div class="container">
|
||||
<div class="section_title_wrapper mb-60 text-center">
|
||||
<h2 class="section-title team_title_h3">新闻产品资讯</h2>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{
|
||||
data.map(item => {
|
||||
return <div class="col-xl-4 col-lg-4 col-md-6">
|
||||
<div class="blog">
|
||||
<a href={`/news/${item.id}`}>
|
||||
<div class="blog__image">
|
||||
<Image class="blog-image" width={100} height={100} alt={item.title} src={item.cover} />
|
||||
{/* <img src="assets/img/Blog/blog1.png" alt="blogImage"> */}
|
||||
</div>
|
||||
<div class="blog__meta">
|
||||
<span>{item.created_at}</span>
|
||||
<div><h3 class="title">{item.title}</h3></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TRY START -->
|
||||
<div class="social_share mb-100">
|
||||
<div class="container">
|
||||
<div class="section_title_wrapper mb-80 text-center mt-115">
|
||||
<h2 class="section-title mb-20">{extra?.sc5?.text1}</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-4 col-md-6 share-container">
|
||||
<div class="share align-items-center mb-30">
|
||||
<div class="share__icon">
|
||||
<Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/vivo.svg`} />
|
||||
</div>
|
||||
<div class="share__content">
|
||||
<h4>vivo</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-4 col-md-6 share-container">
|
||||
<div class="share align-items-center mb-30">
|
||||
<div class="share__icon">
|
||||
<!-- <img src="assets/img/social/twitter.png" alt="shareIcon"> -->
|
||||
<Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/huawei.svg`} />
|
||||
</div>
|
||||
<div class="share__content">
|
||||
<h4>华为</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-4 col-md-6 share-container">
|
||||
<div class="share align-items-center mb-30">
|
||||
<div class="share__icon">
|
||||
<Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/xiaomi.svg`} />
|
||||
</div>
|
||||
<div class="share__content">
|
||||
<h4>小米</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-4 col-md-6 share-container">
|
||||
<div class="share align-items-center mb-30">
|
||||
<div class="share__icon">
|
||||
<Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/oppo.svg`} />
|
||||
</div>
|
||||
<div class="share__content">
|
||||
<h4>OPPO</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TRY END -->
|
||||
</main>
|
||||
|
||||
</Layout>
|
||||
<style>
|
||||
.blog-image {
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.title {
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
224
src/pages/template/4/news.astro
Normal file
224
src/pages/template/4/news.astro
Normal file
@ -0,0 +1,224 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout_4.astro';
|
||||
import { newsIndex } from '../../../../utils/rpc';
|
||||
import { getConfig } from '../../../../utils/config';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from '../../../../utils/const';
|
||||
const config = getConfig(Astro)
|
||||
const {code, data} = await newsIndex(config.id);
|
||||
---
|
||||
<Layout
|
||||
title={TP2_COLUMN_NEWS + `- ${config.app_name}`}
|
||||
description={`新闻专栏 - ${config.app_name}`}
|
||||
keywords={config.app_keywords}
|
||||
>
|
||||
<main class="v4 main page-news">
|
||||
<div class="news-list-component">
|
||||
<div class="container">
|
||||
<div class="wrap wrap--small">
|
||||
<div class="result-product">
|
||||
<div class="result-product__items news-archive-items">
|
||||
{
|
||||
data.map(news => (
|
||||
<a href={`/news/${news.id}`} title={news.title} class="result-product__item result-product__item--border">
|
||||
<div class="result-product__content">
|
||||
<span class="result-product__label">{news.created_at}</span>
|
||||
<div class="heading result-product__title">{news.title}</div>
|
||||
<p class="result-product__info">{news.description}</p>
|
||||
</div>
|
||||
<div class="result-product__media ">
|
||||
<img class="result-product__image img-lazy show success-img" alt={news.title} src={news.cover} onerror="imgErrorUrl(this)" style="">
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
.page-news {
|
||||
background-color: #fff !important;
|
||||
padding-top: 5rem;
|
||||
.result-product__image {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.columns-name {
|
||||
font-size: 5rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.columns-name {
|
||||
font-size: 2rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.result-product__media {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 260px;
|
||||
-ms-flex: 0 0 260px;
|
||||
flex: 0 0 260px;
|
||||
max-width: 260px;
|
||||
height: 173.3px;
|
||||
position: relative
|
||||
}
|
||||
.result-product__image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-product__info {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.result-product__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.71;
|
||||
display: block;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.result-product__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #000;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
max-height: 120px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.result-product__item--border {
|
||||
border-bottom: 1px solid #ededed
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 32px 0
|
||||
}
|
||||
|
||||
|
||||
.result-product {
|
||||
margin-bottom: 80px
|
||||
}
|
||||
|
||||
.result-product:last-of-type {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.result-product__items {
|
||||
display: block;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 32px 0
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.no-touch .result-product__item:hover .result-product__title {
|
||||
color:#7f7f7f
|
||||
}
|
||||
|
||||
.no-touch .result-product__item:hover .result-product__image--thumb::before {
|
||||
opacity: .5
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.result-product__media {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 120px;
|
||||
-ms-flex: 0 0 120px;
|
||||
flex: 0 0 120px;
|
||||
height: 90px;
|
||||
background-color: unset
|
||||
}
|
||||
|
||||
.result-product__info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-product__title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.result-product__content {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.result-product__item--border {
|
||||
border-bottom: 1px solid #ededed
|
||||
}
|
||||
|
||||
.result-product__item-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #000;
|
||||
display: block;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 80px
|
||||
}
|
||||
|
||||
.result-product__item-title--big {
|
||||
font-size: 32px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.5px
|
||||
}
|
||||
|
||||
.result-product__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.71;
|
||||
display: block;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.result-product__content-text {
|
||||
position: relative;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
max-width: 730px;
|
||||
padding-right: 20px
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
336
src/pages/template/4/news/[...slug].astro
Normal file
336
src/pages/template/4/news/[...slug].astro
Normal file
@ -0,0 +1,336 @@
|
||||
---
|
||||
import Layout from '../../../../layouts/Layout_4.astro';
|
||||
import { newsDetail } from '../../../../../utils/rpc';
|
||||
import { getConfig } from '../../../../../utils/config';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from '../../../../../utils/const';
|
||||
const { slug } = Astro.params;
|
||||
const config = getConfig(Astro)
|
||||
if (!slug) {
|
||||
return Astro.redirect('/500');
|
||||
}
|
||||
|
||||
const {code, data} = await newsDetail(slug, config.id);
|
||||
|
||||
if (!data || code !== 0) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const breadcrumb = [{
|
||||
title: '主页',
|
||||
url: '/'
|
||||
}, {title: TP2_COLUMN_NEWS, url: TP2_COLUMN_NEWS_URL}, {title: data.title, url: 'javascript:void(0);'}]
|
||||
---
|
||||
<Layout breadcrumb={breadcrumb} title={`${data.title} - ${config.app_name}`} keywords={data.keywords} description={data.description}>
|
||||
<div>
|
||||
<main class="news-main">
|
||||
<div class="news-container">
|
||||
<article class="news-detail-content">
|
||||
<!-- <span class="news-date">发布于: {data.created_at}</span> -->
|
||||
<h1 class="title" title="标题">{data.title}</h1>
|
||||
<div class="top-icon"></div>
|
||||
<div class="news-content" set:html={data.content}>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="news-navigation">
|
||||
{
|
||||
data.prevNews && (
|
||||
<div>
|
||||
<span>上一篇: </span>
|
||||
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
data.nextNews && (
|
||||
<div>
|
||||
<span>下一篇: </span>
|
||||
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- <aside class="news-sidebar">
|
||||
<div class="related-news">
|
||||
<h3>相关新闻</h3>
|
||||
<ul>
|
||||
{data.about.map(item => (
|
||||
<li>
|
||||
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
|
||||
<span class="related-title">{item.title}</span>
|
||||
{/* <span class="related-date">{item.date}</span> */}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside> -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style is:inline>
|
||||
.news-content p {
|
||||
margin: 20px 0;
|
||||
color: #6f6f6f;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.news-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
main {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 50rem;
|
||||
}
|
||||
|
||||
/* .news-main {
|
||||
margin-top: 5rem;
|
||||
} */
|
||||
|
||||
|
||||
.top-icon {
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e0e0e0
|
||||
}
|
||||
|
||||
.news-date {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #d0021b;
|
||||
line-height: 17px;
|
||||
margin-bottom: 30px;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
color: black;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.news-meta span{
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* .news-date, .news-author {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
} */
|
||||
|
||||
.news-author a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*
|
||||
.news-date::before {
|
||||
content: '📅';
|
||||
}
|
||||
|
||||
.news-author::before {
|
||||
content: '👤';
|
||||
} */
|
||||
|
||||
.news-tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.news-tag {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
padding: 0.3rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9rem;
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.news-tag:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.news-container {
|
||||
/* max-width: 1200px; */
|
||||
/* margin: -2rem auto 0; */
|
||||
/* padding: 0 1.5rem 3rem; */
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: 1fr 320px; */
|
||||
/* gap: 2.5rem; */
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.news-detail-content {
|
||||
border-right: 1px solid var(--text-primary);
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding-top: 3rem;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.news-images {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.news-images img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.news-images img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.news-content p {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
|
||||
.news-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.news-navigation {
|
||||
margin-top: 1rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.related-news {
|
||||
padding: 1rem;
|
||||
/* box-shadow: var(--shadow-lg); */
|
||||
}
|
||||
|
||||
.related-news h3 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
}
|
||||
|
||||
.related-news ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.related-news li {
|
||||
/* margin-bottom: 1.2rem;
|
||||
padding-bottom: 1.2rem; */
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.related-news li:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.related-news a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
/* color: var(--text-secondary); */
|
||||
/* color: black; */
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.4rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.related-news a:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.related-date {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.news-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.news-detail-content {
|
||||
padding: 1.5rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.news-share {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
144
src/pages/template/5/about-us.astro
Normal file
144
src/pages/template/5/about-us.astro
Normal file
@ -0,0 +1,144 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_5.astro";
|
||||
import { getConfig, getExtra, getTp5Extra } from "../../../../utils/config";
|
||||
import {
|
||||
TP2_COLUMN_ABOUT_US,
|
||||
TP2_COLUMN_ABOUT_US_URL,
|
||||
TP2_COLUMN_INDEX,
|
||||
TP2_COLUMN_INDEX_URL,
|
||||
} from "../../../../utils/const";
|
||||
const config = getConfig(Astro);
|
||||
const extra = getTp5Extra(config.app_extra_tag);
|
||||
console.log(extra)
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={TP2_COLUMN_ABOUT_US + ` - ${config.app_name}`}
|
||||
description={`关于我们 - ${config.app_name}`}
|
||||
keywords={config.app_keywords}
|
||||
>
|
||||
<div id="content" class="main" data-site="中国">
|
||||
<main>
|
||||
<div slot="banner-slot">
|
||||
<!-- 活动与新闻-->
|
||||
<div class="hcomponent-page-info">
|
||||
<div class="news-detail-title">
|
||||
<div class="container-custom fix-p-color">
|
||||
<h1 style="color: #000000;"><span>{extra.about_us.title}{config.app_name}</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-custom hcomponent-share-bar">
|
||||
<div class="container-custom">
|
||||
<ul class="share-box list-unstyled hasLine">
|
||||
<li class="line"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div >
|
||||
<div class="hcomponent-news-detail-content">
|
||||
<div class="news-detail-box container-custom clearfix">
|
||||
<div class="news-detail-content">
|
||||
<Fragment set:html={extra.about_us.content} />
|
||||
<p style="text-align: right;">{config.app_company}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.main {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 0%;
|
||||
margin: 0px auto;
|
||||
padding-top: 5rem;
|
||||
h1 {
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 1em;
|
||||
line-height: 1.95em;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
@media (max-width:767px) {
|
||||
.container-custom>.container-custom {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mt20{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.main .bottom-box .share-box {
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.main .share-box {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
.share-box.list-unstyled:not(.hasLine){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.main .share-box li .wechat-qrcode {
|
||||
top: 30px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.main .share-box li .wechat-qrcode p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main .hasLine .line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dddddd;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.main .share-box.s-bottom {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.news-detail-box {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
216
src/pages/template/5/contact-us.astro
Normal file
216
src/pages/template/5/contact-us.astro
Normal file
@ -0,0 +1,216 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_5.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import { getConfig, getExtra, getTp5Extra } from "../../../../utils/config";
|
||||
import {
|
||||
TP2_COLUMN_CONTACT_US,
|
||||
TP2_COLUMN_CONTACT_US_URL,
|
||||
TP2_COLUMN_INDEX,
|
||||
TP2_COLUMN_INDEX_URL,
|
||||
} from "../../../../utils/const";
|
||||
import BaijiahaoLogo from '../../../../public/common/baijiahao.svg'
|
||||
import Toutiaohao from '../../../../public/common/toutiaohao.svg'
|
||||
import Douyin from '../../../../public/common/douyin.svg'
|
||||
import Youxiang from '../../../../public/common/youxiang.svg'
|
||||
const config = getConfig(Astro);
|
||||
const extra = getTp5Extra(config.app_extra_tag)
|
||||
const breadcrumb = [
|
||||
{ title: TP2_COLUMN_INDEX, url: TP2_COLUMN_INDEX_URL },
|
||||
{ title: TP2_COLUMN_CONTACT_US, url: TP2_COLUMN_CONTACT_US_URL }
|
||||
];
|
||||
// 页面描述
|
||||
const desc = extra.contact_us.telephone.map(item => item.number).join('; ');
|
||||
---
|
||||
<Layout
|
||||
title={TP2_COLUMN_CONTACT_US + ` - ${config.app_name}`}
|
||||
description={`${config.app_name}24小时客服电话 - ${desc}`}
|
||||
keywords={config.app_keywords}
|
||||
breadcrumb={breadcrumb}
|
||||
>
|
||||
<main>
|
||||
<div class="contact-container">
|
||||
<h1 style="font-size: 5rem;margin-bottom: 5rem;color:#000000">{extra.contact_us.title}</h1>
|
||||
<!-- <Fragment set:html={extra.contact_us.content}/> -->
|
||||
<section class="list-box">
|
||||
<h2 class="list-title">在线客服</h2>
|
||||
<ul>
|
||||
{
|
||||
extra.contact_us.telephone.map(e => {
|
||||
return <li class="list-item">
|
||||
<a href={`tel:${e.number}`}>
|
||||
<div class="item-content">
|
||||
<Image height={50} width={50} src="/template_2/contact-us/hotline.png" alt="联系热线"/>
|
||||
<div class="txt">
|
||||
<h3 style="margin-left: 1rem;font-weight: bold;">{e.number}</h3>
|
||||
<h4 style="margin-left: 1rem;">24小时全国热线</h4>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
||||
{extra.contact_us.email.length > 0 ? <h2 class="list-title">联系邮箱</h2> : ''}
|
||||
<ul>
|
||||
{
|
||||
extra.contact_us.email.map(e => {
|
||||
return <li class="list-item">
|
||||
<a href={`tel:${e.address}`}>
|
||||
<div class="item-content">
|
||||
<Image height={50} width={50} src="/template_2/contact-us/youxiang.svg" alt="联系邮箱"/>
|
||||
<div class="txt">
|
||||
<h3 style="margin-left: 1rem;font-weight: bold;">{e.address}</h3>
|
||||
<h4 style="margin-left: 1rem;"></h4>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
||||
<h2 class="list-title">官方媒体平台</h2>
|
||||
<ul>
|
||||
{
|
||||
extra.weibo_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.weibo_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<span class="icon-lazy font-ico-weibo" data-name="font-ico-weibo"></span>
|
||||
<div class="txt">
|
||||
<h3>{extra.weibo_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.gongzhonghao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.gongzhonghao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<span class="icon-lazy font-ico-weixin" data-name="font-ico-weixin"></span>
|
||||
<div class="txt">
|
||||
<h3>{extra.gongzhonghao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.baijiahao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.baijiahao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<BaijiahaoLogo class="icon-lazy" />
|
||||
<div class="txt">
|
||||
<h3>{extra.baijiahao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.toutiaohao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.toutiaohao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<Toutiaohao class="icon-lazy"/>
|
||||
<div class="txt">
|
||||
<h3>{extra.toutiaohao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.douyin_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.douyin_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<Douyin class="icon-lazy"/>
|
||||
<div class="txt">
|
||||
<h3>{extra.douyin_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.fa-chevron-right:before {
|
||||
content: ">"
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem ;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-left: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 1rem;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.icon-lazy {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.contact-container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
border-top: 0.01rem solid #d8d8d8;
|
||||
}
|
||||
|
||||
.item-content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-box .list-item>a {
|
||||
padding: 1.5rem;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* height: 1.08rem; */
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 0%;
|
||||
/* padding: 5rem; */
|
||||
margin: 0px auto;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
</style>
|
||||
348
src/pages/template/5/index.astro
Normal file
348
src/pages/template/5/index.astro
Normal file
@ -0,0 +1,348 @@
|
||||
---
|
||||
import "swiper/swiper-bundle.css";
|
||||
import Layout from "../../../layouts/Layout_5.astro";
|
||||
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
|
||||
import { Image } from 'astro:assets';
|
||||
import { getConfig, getTp5Extra } from "../../../../utils/config";
|
||||
import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from "../../../../utils/const";
|
||||
import { newsIndex } from "../../../../utils/rpc";
|
||||
const config = getConfig(Astro)
|
||||
const extra = getTp5Extra(config.app_extra_tag);
|
||||
const {code, data} = await newsIndex(config.id, 3);
|
||||
|
||||
const breadcrumb = [{
|
||||
title: TP2_COLUMN_INDEX,
|
||||
url: TP2_COLUMN_INDEX_URL
|
||||
}]
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={`${config.app_name}`}
|
||||
description={config.app_description}
|
||||
keywords={config.app_keywords}
|
||||
breadcrumb={breadcrumb}
|
||||
>
|
||||
|
||||
<section class="banner-section" slot="banner-slot">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="banner_content" data-aos="fade-down">
|
||||
<h1>知屿寻光 </h1>
|
||||
<h3 class="text-white">学徒追光，知海寻明</h3>
|
||||
<p class="text-white">"知屿寻光"是一款融合课程学习与阅读功能的综合平台，专为热爱知识和自我提升的用户打造。平台汇聚了各类精品课程、书籍、讲座等资源，涵盖了从文学艺术到科技创新、从职场技能到个人成长等多个领域，满足不同用户的学习需求。我们致力于为用户提供多元化的知识获取渠道，无论是通过系统化的课程学习，还是通过随时随地的书籍阅读，都能帮助用户轻松提升自我、拓宽视野。平台不仅注重知识的深度与专业性，还鼓励用户参与其中，分享与交流，激发学习动力和创造力。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="banner_wrapper2">
|
||||
<figure class="mb-0 bannerphoneback">
|
||||
<img src="./template_5/images/bannerphoneback-image1.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 bannerphone2" >
|
||||
<img class="img-fluid" src="./template_5/images/bannerphone2-img.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 bannerphone-circleicon">
|
||||
<img src="./template_5/images/bannerphone-circleicon.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 bannerphone-circle">
|
||||
<img class="img-fluid" src="./template_5/images/bannerphone-circle.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 bannerphone1">
|
||||
<img src="./template_5/images/bannerphone1-img.png" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="mb-0 bannersidecircle1" data-aos="fade-left">
|
||||
<img src="./template_5/images/banner-sidecircle1.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 bannersidecircle2" data-aos="fade-left">
|
||||
<img src="./template_5/images/banner-sidecircle2.png" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Partner -->
|
||||
<div class="partner-section d-none d-lg-inline">
|
||||
<div class="container">
|
||||
<div class="partner_box" data-aos="fade-up">
|
||||
<ul class="mb-0 list-unstyled">
|
||||
<li>
|
||||
<figure class="mb-0 partner1 partner2">
|
||||
<Image class="shareIcon" height={50} width={50} alt="huawei" src={`/common/huawei.svg`} />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure class="mb-0 partner1 partner3">
|
||||
<Image class="shareIcon" height={50} width={50} alt="vivo" src={`/common/vivo.svg`} />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure class="mb-0 partner1 partner4">
|
||||
<Image class="shareIcon" height={50} width={50} alt="xiaomi" src={`/common/xiaomi.svg`} />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure class="mb-0 partner1 partner5">
|
||||
<Image class="shareIcon" height={50} width={50} alt="oppo" src={`/common/oppo.svg`} />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure class="mb-0 partner1 partner5">
|
||||
<Image class="shareIcon" height={50} width={50} alt="meizu" src={`/common/meizu.svg`} />
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About Us -->
|
||||
<section class="aboutus-section overflow-hidden">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
|
||||
<div class="aboutus_content">
|
||||
<h4>关于我们</h4>
|
||||
<h2 class="mb-0 ">为什么选择我们</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-8 col-sm-12 col-12">
|
||||
<div class="aboutus_text" data-aos="fade-left">
|
||||
<p class="mb-0 ">我们努力以专业目全面的课程体系设置，全方位满足用户多样化的学习需求，助力用户在不同知识与技能维度实现自我提升。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Features -->
|
||||
<section class="basic-feature" id="basic-feature">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="feature_wrapperleft">
|
||||
<figure class="mb-0 feature-circle">
|
||||
<img class="img-fluid" src="./template_5/images/feature-circle.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 featurephoneback">
|
||||
<img src="./template_5/images/featurephoneback-img.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 featurephone">
|
||||
<img class="img-fluid" src="./template_5/images/featurephone-img.png" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="feature_wrapperright">
|
||||
<div class="feature_content">
|
||||
<h4>专注于产品自身</h4>
|
||||
<h2>我们具有以下优势</h2>
|
||||
</div>
|
||||
<div class="feature_lowercontent" data-aos="fade-up">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
|
||||
<div class="feature-box">
|
||||
<figure class="feature-marketicon">
|
||||
<img src="./template_5/images/feature-marketicon.png" alt="" class="img-fluid">
|
||||
</figure>
|
||||
<h6>丰富的书籍资源</h6>
|
||||
<p class="text-size-18 mb-0">涵盖哲学系列、名人史迹、历史研究、地域文明、文化理论。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
|
||||
<div class="feature-design">
|
||||
<div class="feature-box">
|
||||
<figure class="feature-graphicon feature-box-2">
|
||||
<img src="./template_5/images/feature-graphicon.png" alt="" class="img-fluid">
|
||||
</figure>
|
||||
<h6>离线阅读</h6>
|
||||
<p class="text-size-18 mb-0">支持离线阅读，无网络也能畅游书海。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-downcontent">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
|
||||
<div class="feature-box">
|
||||
<figure class="feature-graphicon feature-box-3">
|
||||
<img src="./template_5/images/feature-supporticon.png" alt="" class="img-fluid">
|
||||
</figure>
|
||||
<h6>深度视频课程</h6>
|
||||
<p class="text-size-18 mb-0">理解世界的本质逻辑，开阔视野，了解多元文明。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
|
||||
<div class="feature-design feature-guide">
|
||||
<div class="feature-box">
|
||||
<figure class="feature-guideicon feature-box-4">
|
||||
<img src="./template_5/images/feature-guideicon.png" alt="" class="img-fluid">
|
||||
</figure>
|
||||
<h6>提供全天候服务支持</h6>
|
||||
<p class="text-size-18 mb-0">提供7×24小时在线咨询服务，第一时间获得解答和支持。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Ease of Search -->
|
||||
<section class="search-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="search_content" data-aos="fade-up">
|
||||
<figure class="search-icon">
|
||||
<img src="./template_5/images/search-icon.png" alt="" class="img-fluid">
|
||||
</figure>
|
||||
<h2>丰富的阅读种类</h2>
|
||||
<p>"知屿寻光"提供丰富的阅读种类，涵盖多个领域，助力个人成长与全方位提升。无论是探索个人成长的心灵修养，还是深入社会人文的思考，亦或学习经济管理与职场效能的实用知识，平台都为您精心推荐相关书籍。通过多元化的阅读资源，您将获得关于人际沟通的技巧、领导力的提升，以及工作效率的优化，帮助您在个人与职业生活中不断取得突破与进步。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="search_wrapper">
|
||||
<figure class="mb-0 search-sidecircle">
|
||||
<img class="img-fluid" src="./template_5/images/search-sidecircle.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 search-phoneback">
|
||||
<img src="./template_5/images/search-phoneback.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 search-phone1">
|
||||
<img class="img-fluid" src="./template_5/images/search-phone1.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 search-phone2">
|
||||
<img class="img-fluid" src="./template_5/images/search-phone2.png" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Manage -->
|
||||
<div class="manage-section">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12 order-md-1 order-2">
|
||||
<div class="manage_wrapper">
|
||||
<figure class="mb-0 manage-sidecircle">
|
||||
<img class="img-fluid" src="./template_5/images/manage-sidecircle.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 manage-phoneback">
|
||||
<img src="./template_5/images/manage-phoneback.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 manage-phone2">
|
||||
<img class="img-fluid" src="./template_5/images/manage-phone2.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 manage-phone1">
|
||||
<img class="img-fluid" src="./template_5/images/manage-phone1.png" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-12 order-md-2 order-1">
|
||||
<div class="manage_content" data-aos="fade-up">
|
||||
<figure class="search-icon manage-icon">
|
||||
<img src="./template_5/images/manage-icon.png" alt="" class="img-fluid">
|
||||
</figure>
|
||||
<h2>个性化推荐系统</h2>
|
||||
<p>通过深入分析用户的阅读历史和兴趣偏好，我们的智能推荐系统能够精准地为您推荐与您口味相符的书籍。无论是您经常阅读的类型还是您尚未接触的新领域，系统都会为您精心挑选相关内容，帮助您发掘更多感兴趣的书籍。这样，您可以轻松拓展阅读范围，享受更加个性化和丰富的阅读体验。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- statistics -->
|
||||
<section class="statistics-section" id="statistics">
|
||||
<div class="container">
|
||||
<figure class="mb-0 statistics-sidelayer">
|
||||
<img src="./template_5/images/statistics-sidelayer.png" alt="">
|
||||
</figure>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
|
||||
<div class="statistics_content">
|
||||
<h4 class="text-white">我们努力做得更好</h4>
|
||||
<h2 class="text-white">持续创新，用户至上</h2>
|
||||
<p class="text-white">我们不仅注重于产品自身，更注重于用户的体验。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-value" data-aos="fade-down">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
|
||||
<div class="number1">
|
||||
<span class="value1 counter">500000</span>
|
||||
<sup class="mb-0 plus">+</sup>
|
||||
<span class="text1">累计下载次数</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
|
||||
<div class="number1">
|
||||
<span class="value1 counter">25</span>
|
||||
<sup class="mb-0 plus">+</sup>
|
||||
<span class="text1 text2">学习课程</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
|
||||
<div class="number1">
|
||||
<span class="value1 counter">6</span>
|
||||
<sup class="mb-0 plus">大</sup>
|
||||
<span class="mb-0 text1 text3">课程分类</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
|
||||
<div class="number1 number4">
|
||||
<span class="value1 counter">7</span>
|
||||
<sup class="mb-0 plus">24</sup>
|
||||
<span class="mb-0 text1 text4">在线服务</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Available -->
|
||||
<section class="available-section" id="get-app">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-7 col-md-7 col-sm-12 col-12">
|
||||
<div class="available_content">
|
||||
<h2 class="text-white">在各大应用商店中下载</h2>
|
||||
<p class="text-white">知屿寻光是一款全新推出的智能应用，致力于为用户提供精准的内容推荐和个性化服务。现在，您可以通过各大应用平台轻松下载并体验，为您的生活增添更多色彩与便利。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-12 col-12">
|
||||
<div class="available_wrapper">
|
||||
<figure class="mb-0 available-phone1">
|
||||
<img class="img-fluid" src="./template_5/images/available-phone1.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 available-phone3">
|
||||
<img src="./template_5/images/available-phone3.png" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="mb-0 available-phone2">
|
||||
<img class="img-fluid" src="./template_5/images/available-phone2.png" alt="">
|
||||
</figure>
|
||||
<figure class="mb-0 available-sidelayer">
|
||||
<img src="./template_5/images/available-sidelayer.png" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
<style>
|
||||
.partner_box ul {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.partner_box ul {
|
||||
justify-content: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
224
src/pages/template/5/news.astro
Normal file
224
src/pages/template/5/news.astro
Normal file
@ -0,0 +1,224 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout_5.astro';
|
||||
import { newsIndex } from '../../../../utils/rpc';
|
||||
import { getConfig } from '../../../../utils/config';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from '../../../../utils/const';
|
||||
const config = getConfig(Astro)
|
||||
const {code, data} = await newsIndex(config.id);
|
||||
---
|
||||
<Layout
|
||||
title={TP2_COLUMN_NEWS + `- ${config.app_name}`}
|
||||
description={`新闻专栏 - ${config.app_name}`}
|
||||
keywords={config.app_keywords}
|
||||
>
|
||||
<main class="v4 main page-news">
|
||||
<div class="news-list-component">
|
||||
<div class="container">
|
||||
<div class="wrap wrap--small">
|
||||
<div class="result-product">
|
||||
<div class="result-product__items news-archive-items">
|
||||
{
|
||||
data.map(news => (
|
||||
<a href={`/news/${news.id}`} title={news.title} class="result-product__item result-product__item--border">
|
||||
<div class="result-product__content">
|
||||
<span class="result-product__label">{news.created_at}</span>
|
||||
<div class="heading result-product__title">{news.title}</div>
|
||||
<p class="result-product__info">{news.description}</p>
|
||||
</div>
|
||||
<div class="result-product__media ">
|
||||
<img class="result-product__image img-lazy show success-img" alt={news.title} src={news.cover} onerror="imgErrorUrl(this)" style="">
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
.page-news {
|
||||
background-color: #fff !important;
|
||||
padding-top: 5rem;
|
||||
.result-product__image {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.columns-name {
|
||||
font-size: 5rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.columns-name {
|
||||
font-size: 2rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.result-product__media {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 260px;
|
||||
-ms-flex: 0 0 260px;
|
||||
flex: 0 0 260px;
|
||||
max-width: 260px;
|
||||
height: 173.3px;
|
||||
position: relative
|
||||
}
|
||||
.result-product__image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-product__info {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.result-product__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.71;
|
||||
display: block;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.result-product__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #000;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
max-height: 120px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.result-product__item--border {
|
||||
border-bottom: 1px solid #ededed
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 32px 0
|
||||
}
|
||||
|
||||
|
||||
.result-product {
|
||||
margin-bottom: 80px
|
||||
}
|
||||
|
||||
.result-product:last-of-type {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.result-product__items {
|
||||
display: block;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 32px 0
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.no-touch .result-product__item:hover .result-product__title {
|
||||
color:#7f7f7f
|
||||
}
|
||||
|
||||
.no-touch .result-product__item:hover .result-product__image--thumb::before {
|
||||
opacity: .5
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.result-product__media {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 120px;
|
||||
-ms-flex: 0 0 120px;
|
||||
flex: 0 0 120px;
|
||||
height: 90px;
|
||||
background-color: unset
|
||||
}
|
||||
|
||||
.result-product__info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-product__title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.result-product__content {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.result-product__item--border {
|
||||
border-bottom: 1px solid #ededed
|
||||
}
|
||||
|
||||
.result-product__item-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #000;
|
||||
display: block;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 80px
|
||||
}
|
||||
|
||||
.result-product__item-title--big {
|
||||
font-size: 32px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.5px
|
||||
}
|
||||
|
||||
.result-product__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.71;
|
||||
display: block;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.result-product__content-text {
|
||||
position: relative;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
max-width: 730px;
|
||||
padding-right: 20px
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
336
src/pages/template/5/news/[...slug].astro
Normal file
336
src/pages/template/5/news/[...slug].astro
Normal file
@ -0,0 +1,336 @@
|
||||
---
|
||||
import Layout from '../../../../layouts/Layout_4.astro';
|
||||
import { newsDetail } from '../../../../../utils/rpc';
|
||||
import { getConfig } from '../../../../../utils/config';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from '../../../../../utils/const';
|
||||
const { slug } = Astro.params;
|
||||
const config = getConfig(Astro)
|
||||
if (!slug) {
|
||||
return Astro.redirect('/500');
|
||||
}
|
||||
|
||||
const {code, data} = await newsDetail(slug, config.id);
|
||||
|
||||
if (!data || code !== 0) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const breadcrumb = [{
|
||||
title: '主页',
|
||||
url: '/'
|
||||
}, {title: TP2_COLUMN_NEWS, url: TP2_COLUMN_NEWS_URL}, {title: data.title, url: 'javascript:void(0);'}]
|
||||
---
|
||||
<Layout breadcrumb={breadcrumb} title={`${data.title} - ${config.app_name}`} keywords={data.keywords} description={data.description}>
|
||||
<div>
|
||||
<main class="news-main">
|
||||
<div class="news-container">
|
||||
<article class="news-detail-content">
|
||||
<!-- <span class="news-date">发布于: {data.created_at}</span> -->
|
||||
<h1 class="title" title="标题">{data.title}</h1>
|
||||
<div class="top-icon"></div>
|
||||
<div class="news-content" set:html={data.content}>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="news-navigation">
|
||||
{
|
||||
data.prevNews && (
|
||||
<div>
|
||||
<span>上一篇: </span>
|
||||
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
data.nextNews && (
|
||||
<div>
|
||||
<span>下一篇: </span>
|
||||
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- <aside class="news-sidebar">
|
||||
<div class="related-news">
|
||||
<h3>相关新闻</h3>
|
||||
<ul>
|
||||
{data.about.map(item => (
|
||||
<li>
|
||||
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
|
||||
<span class="related-title">{item.title}</span>
|
||||
{/* <span class="related-date">{item.date}</span> */}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside> -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style is:inline>
|
||||
.news-content p {
|
||||
margin: 20px 0;
|
||||
color: #6f6f6f;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.news-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
main {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 50rem;
|
||||
}
|
||||
|
||||
/* .news-main {
|
||||
margin-top: 5rem;
|
||||
} */
|
||||
|
||||
|
||||
.top-icon {
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e0e0e0
|
||||
}
|
||||
|
||||
.news-date {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #d0021b;
|
||||
line-height: 17px;
|
||||
margin-bottom: 30px;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
color: black;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.news-meta span{
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* .news-date, .news-author {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
} */
|
||||
|
||||
.news-author a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*
|
||||
.news-date::before {
|
||||
content: '📅';
|
||||
}
|
||||
|
||||
.news-author::before {
|
||||
content: '👤';
|
||||
} */
|
||||
|
||||
.news-tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.news-tag {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
padding: 0.3rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9rem;
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.news-tag:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.news-container {
|
||||
/* max-width: 1200px; */
|
||||
/* margin: -2rem auto 0; */
|
||||
/* padding: 0 1.5rem 3rem; */
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: 1fr 320px; */
|
||||
/* gap: 2.5rem; */
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.news-detail-content {
|
||||
border-right: 1px solid var(--text-primary);
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding-top: 3rem;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.news-images {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.news-images img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.news-images img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.news-content p {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
|
||||
.news-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.news-navigation {
|
||||
margin-top: 1rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.related-news {
|
||||
padding: 1rem;
|
||||
/* box-shadow: var(--shadow-lg); */
|
||||
}
|
||||
|
||||
.related-news h3 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
}
|
||||
|
||||
.related-news ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.related-news li {
|
||||
/* margin-bottom: 1.2rem;
|
||||
padding-bottom: 1.2rem; */
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.related-news li:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.related-news a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
/* color: var(--text-secondary); */
|
||||
/* color: black; */
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.4rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.related-news a:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.related-date {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.news-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.news-detail-content {
|
||||
padding: 1.5rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.news-share {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
15
src/styles/common/main.css
Normal file
15
src/styles/common/main.css
Normal file
@ -0,0 +1,15 @@
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 5rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* background: var(--background-light); */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
main {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@ Author: Zoyothemes
|
||||
Email: zoyothemes@gmail.com
|
||||
File: Main Css File
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
|
||||
/* @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"); */
|
||||
/*
|
||||
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
7
src/styles/template_4/bootstrap.min.css
vendored
Normal file
7
src/styles/template_4/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
266
src/styles/template_4/meanmenu.css
Normal file
266
src/styles/template_4/meanmenu.css
Normal file
@ -0,0 +1,266 @@
|
||||
|
||||
/*! #######################################################################
|
||||
|
||||
MeanMenu 2.0.7
|
||||
--------
|
||||
|
||||
To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)
|
||||
|
||||
####################################################################### */
|
||||
|
||||
/* hide the link until viewport size is reached */
|
||||
a.meanmenu-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* when under viewport size, .mean-container is added to body */
|
||||
.mean-container .mean-bar {
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #0c1923;
|
||||
padding: 4px 0;
|
||||
min-height: 42px;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.mean-container a.meanmenu-reveal {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 13px 13px 11px 13px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
text-indent: -9999em;
|
||||
line-height: 22px;
|
||||
font-size: 1px;
|
||||
display: block;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mean-container a.meanmenu-reveal span {
|
||||
display: block;
|
||||
background: #fff;
|
||||
height: 3px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav {
|
||||
float: left;
|
||||
width: 100%;
|
||||
background: #0c1923;
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li a {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 90%;
|
||||
padding: 1em 5%;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
border-top: 1px solid #383838;
|
||||
border-top: 1px solid rgba(255,255,255,0.5);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li li a {
|
||||
width: 80%;
|
||||
padding: 1em 10%;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
border-top: 1px solid rgba(255,255,255,0.25);
|
||||
opacity: 0.75;
|
||||
filter: alpha(opacity=75);
|
||||
text-shadow: none !important;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li.mean-last a {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li li li a {
|
||||
width: 70%;
|
||||
padding: 1em 15%;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li li li li a {
|
||||
width: 60%;
|
||||
padding: 1em 20%;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li li li li li a {
|
||||
width: 50%;
|
||||
padding: 1em 25%;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li a:hover {
|
||||
background: #252525;
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li a.mean-expand {
|
||||
margin-top: 1px;
|
||||
width: 26px;
|
||||
height: 32px;
|
||||
padding: 12px !important;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
font-weight: 700;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none !important;
|
||||
border-left: 1px solid rgba(255,255,255,0.4) !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2) !important;
|
||||
}
|
||||
|
||||
.mean-container .mean-nav ul li a.mean-expand:hover {
|
||||
background: rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
.mean-container .mean-push {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.mean-nav .wrapper {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Fix for box sizing on Foundation Framework etc. */
|
||||
.mean-container .mean-bar, .mean-container .mean-bar * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
|
||||
.mean-remove {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* mobile menu css */
|
||||
.side-toggle {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.side-menu-icon i {
|
||||
color: #132339;
|
||||
font-size: 32px;
|
||||
cursor: pointer;
|
||||
top: 39px;
|
||||
}
|
||||
.side-info {
|
||||
background: #152136;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
right: -100%;
|
||||
top: 0;
|
||||
padding: 30px;
|
||||
transition: .6s;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.side-info.info-open {
|
||||
right: 0;
|
||||
}
|
||||
.side-info-close {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.side-info-content h1 {
|
||||
color: #fff;
|
||||
font-size: 29px;
|
||||
}
|
||||
.offcanvas-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #000;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.offcanvas-overlay.overlay-open {
|
||||
opacity: .5;
|
||||
visibility: visible;
|
||||
}
|
||||
/* mean menu customize */
|
||||
.mean-container a.meanmenu-reveal {
|
||||
display: none;
|
||||
}
|
||||
.mean-container .mean-nav {
|
||||
background: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
.mean-container .mean-bar {
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
background: none;
|
||||
}
|
||||
.mean-container .mean-nav > ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
display: block !important;
|
||||
}
|
||||
.mean-container a.meanmenu-reveal {
|
||||
display: none !important;
|
||||
}
|
||||
.mean-container .mean-nav ul li a {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
color: #fff;
|
||||
border-top: 1px solid #2a3a57;
|
||||
font-size: 13px;
|
||||
}
|
||||
.mean-container .mean-nav ul li a.mean-expand {
|
||||
margin-top: 0px;
|
||||
height: 15px;
|
||||
padding: 12px 12px !important;
|
||||
line-height: 14px;
|
||||
}
|
||||
.mean-container .mean-nav > ul > li:first-child a{
|
||||
border-top: 0;
|
||||
}
|
||||
34
src/styles/template_4/responsive.css
Normal file
34
src/styles/template_4/responsive.css
Normal file
@ -0,0 +1,34 @@
|
||||
/* Normal desktop :1200px. */
|
||||
@media (min-width: 1200px) and (max-width: 1500px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Normal desktop :992px. */
|
||||
@media (min-width: 992px) and (max-width: 1200px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Tablet desktop :768px. */
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* small mobile :320px. */
|
||||
@media (max-width: 767px) {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Large Mobile :480px. */
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
||||
|
||||
|
||||
}
|
||||
11148
src/styles/template_4/style.css
Normal file
11148
src/styles/template_4/style.css
Normal file
File diff suppressed because it is too large
Load Diff
6
src/styles/template_5/bootstrap.min.css
vendored
Normal file
6
src/styles/template_5/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
771
src/styles/template_5/responsive.css
Normal file
771
src/styles/template_5/responsive.css
Normal file
@ -0,0 +1,771 @@
|
||||
/* Media Queries */
|
||||
@media screen and (max-width: 1440px){
|
||||
h1 {font-size: 54px; line-height: 62px;}
|
||||
h2 {font-size: 40px; line-height: 46px;}
|
||||
h4 {font-size: 26px; line-height: 30px;}
|
||||
p {line-height: 34px;}
|
||||
.banner_outer {border-radius: 0 0 50px 50px;}
|
||||
.banner_outer .bannersidelayer img {width: 489px;}
|
||||
.banner-section .bannersidecircle1 {top: 10px; left: 27px;}
|
||||
.banner-section .bannersidecircle1 img{ width: 49px;}
|
||||
.banner-section .bannersidecircle2 {top: 526px;}
|
||||
.banner-section .bannersidecircle2 img{ width: 44px;}
|
||||
.banner-section .banner_content {padding-top: 0px;}
|
||||
.banner-section .banner_wrapper2 {top: 21px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2 {top: -4px; left: -26px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2 img {width: 315px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback {top: -57px; right: 40px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback img {width: 552px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon {top: -44px; right: 262px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon img {width: 83px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle {top: 39px; right: 237px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle img {width: 36px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone1 {top: -30px; right: -18px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone1 img {width: 372px;}
|
||||
.banner-section .banner_content p {margin-bottom: 25px;}
|
||||
.basic-feature {padding-bottom: 146px;}
|
||||
.offer-videosection .image-sidecircle {position: absolute; right: -20px; top: -58px;}
|
||||
.search_wrapper .search-sidecircle {left: -90px;}
|
||||
.search_wrapper .search-phoneback {right: 46px;}
|
||||
.search_wrapper .search-phone1 {right: -36px;}
|
||||
.search_wrapper .search-phone2 {left: -138px;}
|
||||
.manage_wrapper .manage-sidecircle {left: -10px;}
|
||||
.manage_wrapper .manage-phoneback {right: -50px;}
|
||||
.manage_wrapper .manage-phone2 {right: 2px;}
|
||||
.manage_wrapper .manage-phone1 {left: 50px;}
|
||||
.statistics-section .statistics-sidelayer img{width: 650px;}
|
||||
.price-block .price-sidecircle {right: -22px; top: -54px;}
|
||||
.price-section .price-circle {top: -370px; right: -320px;}
|
||||
.available-section .available_wrapper .available-phone1{left: -240px; top: -172px;}
|
||||
.available-section .available_wrapper .available-phone1 img{width: 415px;}
|
||||
.available-section .available_wrapper .available-phone3 {top: 210px; left: -76px;}
|
||||
.available-section .available_wrapper .available-phone3 img{width: 460px;}
|
||||
.available-section .available-phone2 {top: 172px;}
|
||||
.available-section .available-phone2 img{width: 370px;}
|
||||
/* About */
|
||||
.sub-banner .bannersidelayer img {width: 489px;}
|
||||
.sub-banner .banner-section .bannersidecircle1 {top: 54px;}
|
||||
.sub-banner .banner-section .bannersidecircle2 {top: 175px;}
|
||||
.about-section .price-circle {top: -284px; right: -346px;}
|
||||
.about-section .price-sidecircle {right: -24px; top: -46px;}
|
||||
.team-section .our-teams-wrapper {margin-top: -454px;}
|
||||
#carouselExampleControls .carousel-control-prev {left: -42px; width: 10%;}
|
||||
#carouselExampleControls .carousel-control-next{right: -42px; width: 10%;}
|
||||
/* Contact */
|
||||
.message-section .manage_wrapper .manage-phoneback {right: -24px;}
|
||||
.message-section .manage_wrapper .manage-phone1 {left: 14px;}
|
||||
.message-section .manage_wrapper .manage-phone2 {right: 38px;}
|
||||
/* Pricing */
|
||||
.pricing-section .price-sidecircle {right: -30px;}
|
||||
.pricing-section .price-sidecircle img{width: 42px;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px){
|
||||
.navbar-nav li:last-child {margin-left: 22px;}
|
||||
.navbar {padding: 35px 0;}
|
||||
/* .navbar-brand figure img {width: 145px;} */
|
||||
.navbar-nav li {margin: 0px 12px;}
|
||||
.navbar-nav .nav-item .try_free_btn {padding: 16px 28px;}
|
||||
h1 {font-size: 44px; line-height: 54px;}
|
||||
h2 {font-size: 34px; line-height: 40px;}
|
||||
h3 {font-size: 28px; line-height: 32px;}
|
||||
h4 {font-size: 24px; line-height: 28px;}
|
||||
h5 {font-size: 24px; line-height: 30px;}
|
||||
h6 {font-size: 20px; line-height: 25px;}
|
||||
p {font-size: 18px; line-height: 30px;}
|
||||
.banner_outer .bannersidelayer img {width: 362px;}
|
||||
.banner-section {padding: 100px 0 270px;}
|
||||
.banner-section .banner_content {padding-top: 0px;}
|
||||
.banner-section .banner_content h3 {margin-bottom: 5px;}
|
||||
.banner-section .banner_content p {margin-bottom: 26px;}
|
||||
.banner-section .banner_content span {margin-bottom: 16px;}
|
||||
.banner-section .banner_content .image_apple img{width: 144px;}
|
||||
.banner-section .banner_content .image_google img{width: 142px;}
|
||||
.banner-section .bannersidecircle1 {top: -2px;}portant
|
||||
.banner-section .bannersidecircle1 img {width: 48px;}
|
||||
.banner-section .bannersidecircle2 { top: 512px;}
|
||||
.banner-section .bannersidecircle2 img{width: 41px;}
|
||||
.banner-section .banner_wrapper2 {top: 7px;}
|
||||
.banner-section .bannerphone2 img {width: 273px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback {top: -42px; right: 42px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback img {width: 470px;}
|
||||
.banner-section .bannerphone1 {top: -26px ; right: -22px ;}
|
||||
.banner-section .banner_wrapper2 .bannerphone1 img {width: 330px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon {top: -20px; right: 225px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon img {width: 76px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle {top: 58px; right: 208px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle img {width: 32px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2 {left: -46px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2 img {width: 275px;}
|
||||
.partner-section .partner_box {padding: 50px 35px;}
|
||||
.partner-section .partner_box li {margin-right: 15px;}
|
||||
.aboutus-section {padding: 97px 0 89px;}
|
||||
.aboutus-section .aboutus_text {padding: 39px 0 0;}
|
||||
.basic-feature .featurephoneback img {width: 470px;}
|
||||
.basic-feature .featurephoneback {left: -18px;}
|
||||
.basic-feature .featurephone {left: 100px; top: 6px;}
|
||||
.basic-feature .featurephone img{width: 260px;}
|
||||
.basic-feature .featurephone-over {right: -28px; top: 268px;}
|
||||
.basic-feature .featurephone-over img{width: 230px;}
|
||||
.basic-feature .feature-circle {left: 22px; top: 84px;}
|
||||
.basic-feature .feature-circle img{width: 60px;}
|
||||
.basic-feature .feature-box figure{height: 75px; width: 75px; line-height: 75px; margin-bottom: 12px;}
|
||||
.basic-feature .feature_wrapperright {padding: 0px 0 0 7px;}
|
||||
.basic-feature .feature-box {margin-bottom: 40px;}
|
||||
.basic-feature .feature-design {padding-left: 0;}
|
||||
.basic-feature {padding-bottom: 58px;}
|
||||
.offer-videosection .image-sidecircle {right: -14px; top: -46px;}
|
||||
.offer-videosection .image-sidecircle img{width: 44px;}
|
||||
.offer-section .offer_content .offer-apple img{width: 144px;}
|
||||
.offer-section .offer_content .offer-google img{width: 142px;}
|
||||
.offer-section {padding: 328px 0 98px;}
|
||||
.search-section {padding: 124px 0 160px;}
|
||||
.search_content .search-icon {height: 75px; width: 75px; line-height: 75px; margin-bottom: 12px;}
|
||||
.search-section .search_content p {padding-right: 42px;}
|
||||
.search-section .search_content .p-text {margin-bottom: 26px;}
|
||||
.search-section .try_free_btn {padding: 16px 28px;}
|
||||
.search-section .search_wrapper .search-sidecircle {left: -56px; top: 26px;}
|
||||
.search-section .search_wrapper .search-sidecircle img{width: 60px;}
|
||||
.search-section .search_wrapper .search-phoneback {right: 28px;}
|
||||
.search-section .search_wrapper .search-phoneback img{width: 480px;}
|
||||
.search-section .search_wrapper .search-phone1 {right: -20px; top: -6px;}
|
||||
.search-section .search_wrapper .search-phone1 img{width: 330px;}
|
||||
.search-section .search_wrapper .search-phone2 {left: -72px; top: -26px;}
|
||||
.search-section .search_wrapper .search-phone2 img{width: 320px;}
|
||||
.manage-section {padding: 194px 0 0 0;}
|
||||
.manage-section .manage_wrapper .manage-sidecircle {left: -6px; top: 44px;}
|
||||
.manage-section .manage_wrapper .manage-sidecircle img{width: 40px;}
|
||||
.manage-section .manage_wrapper .manage-phoneback {right: -18px; top: 20px;}
|
||||
.manage-section .manage_wrapper .manage-phoneback img{width: 470px;}
|
||||
.manage-section .manage_wrapper .manage-phone2 {right: 38px; top: -6px;}
|
||||
.manage-section .manage_wrapper .manage-phone2 img{width: 210px;}
|
||||
.manage-section .manage_wrapper .manage-phone1 {left: 44px; top: -26px;}
|
||||
.manage-section .manage_wrapper .manage-phone1 img{width: 185px;}
|
||||
.manage-section .manage_content {padding-left: 43px;}
|
||||
.search-section .manage-icon{height: 75px; width: 75px; line-height: 75px; margin-bottom: 12px;}
|
||||
.manage-section .manage-section .manage_content .p-text {margin-bottom: 26px;}
|
||||
.statistics-section {padding: 100px 0 92px;}
|
||||
.statistics-section .statistics-value .value1 {font-size: 42px; line-height: 34px;}
|
||||
.statistics-section .statistics-value .text1 {font-size: 20px; line-height: 34px;}
|
||||
.statistics-section .statistics-sidelayer img {width: 610px;}
|
||||
.price-section {padding: 94px 0 102px;}
|
||||
.price-section .price_heading h2 {margin-bottom: 35px;}
|
||||
.price-block .price-sidecircle {right: -10px; top: -52px;}
|
||||
.price-section .price_content .text1 {font-size: 38px; line-height: 50px;}
|
||||
.price-section .price-block .price_content {padding: 40px;}
|
||||
.price-section .price_content .icon-size1{height: 100px; width: 100px; line-height: 100px; margin-bottom: 12px;}
|
||||
.price-section .price_content .get_started {padding: 20px 38px;}
|
||||
.accordian-section {padding: 97px 0 100px;}
|
||||
.accordian-section .accordian-inner .card-body {padding: 20px 0;}
|
||||
.accordian_content h4 {margin-bottom: 6px;}
|
||||
.accordian_content h2 {margin-bottom: 35px;}
|
||||
.available-section {padding: 90px 0 100px;}
|
||||
.available-section .available_content h2 {font-size: 50px; line-height: 65px; padding-right: 150px; margin-bottom: 10px;}
|
||||
.available-section .available_content p {line-height: 30px; padding-right: 44px; margin-bottom: 20px;}
|
||||
.available-section .available-sidelayer {display: none;}
|
||||
.available-section .available_content .available-apple img{width: 144px;}
|
||||
.available-section .available_content .available-google img{width: 142px;}
|
||||
.available-section .available_wrapper .available-phone1 {left: -222px; top: -152px;}
|
||||
.available-section .available_wrapper .available-phone1 img {width: 372px;}
|
||||
.available-section .available_wrapper .available-phone3 {top: 180px; left: -134px;}
|
||||
.available-section .available_wrapper .available-phone3 img {width: 432px;}
|
||||
.available-section .available-phone2 {top: 150px;}
|
||||
.available-section .available-phone2 img {width: 350px;}
|
||||
.footer-section {padding: 98px 0 0px;}
|
||||
.footer-section .heading {font-size: 28px; line-height: 24px; margin-bottom: 28px;}
|
||||
.footer-section .text {line-height: 32px;}
|
||||
.footer-section .middle-portion {margin-bottom: 35px;}
|
||||
.footer-section .middle-portion .services {padding-left: 10px;}
|
||||
.footer-section .middle-portion .links {padding-left: 30px;}
|
||||
.footer-section .middle-portion .aboutus {padding-left: 50px;}
|
||||
.footer-section .footer-lower .text-size-18 {line-height: 36px;}
|
||||
.footer-section .footer-lower {padding: 30px 0;}
|
||||
/* About */
|
||||
.sub-banner {border-radius: 0 0 115px 115px;}
|
||||
.sub-banner .bannersidelayer img {width: 362px;}
|
||||
.sub-banner .banner-section .bannersidecircle2 {top: 130px;}
|
||||
.sub-banner .banner-section {padding: 60px 0 95px;}
|
||||
.sub-banner .banner-section .banner_content .box span {font-size: 18px; line-height: 28px;}
|
||||
.sub-banner .banner-section .banner_content .box figure {margin: 0 12px;}
|
||||
.sub-banner .banner-section .banner_content .box {padding: 5px 20px; margin-bottom: 26px;}
|
||||
.sub-banner .banner-section .banner_content p {padding: 0px 110px;}
|
||||
.about-section {padding: 220px 0 100px;}
|
||||
.about-section .about_content {padding: 45px 30px;}
|
||||
.count-section .count_content {margin-top: 0;}
|
||||
.about-section .about_content .icon-size1 {height: 132px; width: 132px; line-height: 132px;}
|
||||
.about-section .about_content h3 {font-size: 30px;}
|
||||
.about-section .about_content p {padding: 0px;}
|
||||
.about-section .price-sidecircle {right: -12px;}
|
||||
.count-section {padding: 100px 0;}
|
||||
.count-section .count_content h2 {margin-bottom: 16px;}
|
||||
.count-section .count_content .offer-apple img {width: 144px;}
|
||||
.count-section .count_content .offer-google img {width: 142px;}
|
||||
.count-section .count-rightcontent .value1 {font-size: 42px; line-height: 34px;}
|
||||
.count-section .count-rightcontent .text1 {font-size: 20px; line-height: 34px;}
|
||||
.count-section .count-rightcontent .number1 {padding: 30px 18px 28px;}
|
||||
.team-section .teams-background {padding: 237px 0;}
|
||||
.team-section .our-teams-wrapper .team_content h2 {margin-bottom: 34px;}
|
||||
.team-section .our-teams-wrapper .team-box .lower-part {padding: 26px;}
|
||||
.team-section .our-teams-wrapper .team-box .lower-part p {margin-bottom: 14px;}
|
||||
.team-section .our-teams-wrapper .team-box .lower-part ul li {margin-right: 13px;}
|
||||
.team-section .teams-background figure img{width: 460px;}
|
||||
.team-section .our-teams-wrapper {margin-top: -381px;}
|
||||
.review-section {padding: 62px 0 100px;}
|
||||
.review-section .review_content .content-box .circle {height: 90px; width: 90px; line-height: 90px;}
|
||||
#carouselExampleControls .carousel-control-prev {left: -25px; width: 5%;}
|
||||
#carouselExampleControls .carousel-control-next {right: -25px; width: 5%;}
|
||||
/* Feature About */
|
||||
.feature-aboutsection {padding: 216px 0 82px;}
|
||||
.feature-aboutsection .feature_aboutcontent .icon-size1 {height: 110px; width: 110px; line-height: 110px;}
|
||||
.feature-aboutsection .feature_aboutcontent h5 {line-height: 40px; margin-bottom: 2px;}
|
||||
.feature-aboutsection .feature-block .feature_aboutcontent {padding: 52px 30px 44px;}
|
||||
.feature-basicfeature {padding: 95px 0 140px;}
|
||||
/* Contact */
|
||||
.message-section .manage_content {padding-left: 20px;}
|
||||
.message-section .message_content {padding: 40px 30px;}
|
||||
.message-section .message_content input {padding: 10px 18px; margin-bottom: 20px;}
|
||||
.message-section .message_content textarea {height: 170px;}
|
||||
.message-section .message_content .submit_now {padding: 18px 40px;}
|
||||
.message-section .manage_wrapper .manage-phoneback {right: -18px; top: 38px;}
|
||||
.message-section .manage_wrapper .manage-phoneback img{width: 470px;}
|
||||
.message-section .manage_wrapper .manage-phone2 {right: 38px; top: 20px;}
|
||||
.message-section .manage_wrapper .manage-phone2 img{width: 210px;}
|
||||
.message-section .manage_wrapper .manage-phone1 {left: 44px; top: 2px;}
|
||||
.message-section .manage_wrapper .manage-phone1 img{width: 185px;}
|
||||
.contact-section {padding: 96px 0 84px;}
|
||||
.contact-section .feature-block .feature_aboutcontent .icon-size1 {height: 100px; width: 100px; line-height: 100px;}
|
||||
.contact-section .feature-block .feature_aboutcontent {padding: 44px 30px;}
|
||||
/* Pricing */
|
||||
.outer_background .sub-banner .banner-section {padding: 58px 0 236px;}
|
||||
.pricing-section {padding: 0 0 83px;}
|
||||
.pricing-section .price-sidecircle {display: none;}
|
||||
.pricing-section .pricing-box {padding: 20px; margin-bottom: 20px;}
|
||||
.pricing-section .pricing_content { width: 100%; padding: 20px 0 10px;}
|
||||
.pricing-section .pricing_content .icon-size1 {height: 100px; width: 100px; line-height: 100px; margin-bottom: 12px;}
|
||||
.pricing-section .pricing-box .content1 {padding: 35px 0 0 8px;}
|
||||
.pricing-section .pricing-box .content2 {padding: 33px 0 0 8px;}
|
||||
.pricing-section .pricing-box .text1 {font-size: 38px; line-height: 60px; margin-bottom: 5px;}
|
||||
.pricing-section .pricing-box .content3 {padding: 20px 0 0 18px;}
|
||||
.pricing-section .pricing-box .get_started {padding: 20px 38px;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px){
|
||||
.navbar {padding: 25px 0;}
|
||||
.navbar-nav .nav-item .try_free_btn { padding: 12px 30px !important; font-size: 16px !important; line-height: 16px !important; background-color: transparent; font-weight: 400 !important; display: block; text-align: left; border-radius: 0; color: var(--e-global-color-primary) !important;}
|
||||
.navbar-nav .nav-item .try_free_btn:hover { color: var(--e-global-color-white) !important; background-color: var(--e-global-color-bright-blue) !important;}
|
||||
.navbar-nav .active > .try_free_btn {background-color: var(--e-global-color-bright-blue); color: var(--e-global-color-white) !important;}
|
||||
.navbar-collapse {background: var(--e-global-color-white); position: absolute; right: 0px; width: 30%; top: 60px; z-index: 16; padding: 0;}
|
||||
.navbar-toggler {margin-left: auto; border: none !important; padding: 0; width: 30px; height: 22px;}
|
||||
.navbar-light .navbar-toggler-icon { background: var(--e-global-color-white); height: 2px; margin: 7px 0 0 0; width: 100%; float: right;}
|
||||
.navbar-toggler.collapsed span:nth-child(1) {transform: rotate(0deg);}
|
||||
.navbar-toggler span.navbar-toggler-icon:first-child {margin-top: 0;}
|
||||
.navbar-toggler span:nth-child(1) {transform: rotate(45deg); transform-origin: 0% 80%;}
|
||||
.navbar-toggler span.navbar-toggler-icon {transition: all 0.15s;}
|
||||
.navbar-toggler.collapsed span:nth-child(2) {opacity: 1;}
|
||||
.navbar-toggler span:nth-child(2) {opacity: 0;}
|
||||
.navbar-toggler.collapsed span:nth-child(3) {transform: rotate(0deg);}
|
||||
.navbar-toggler span:nth-child(3) {transform: rotate(-45deg); transform-origin: 15% 100%;}
|
||||
.collapse:not(.show) {display: none;}
|
||||
.navbar-collapse ul{align-items: unset; text-align: unset; margin-left: 0;}
|
||||
button:focus { outline: none;}
|
||||
.navbar-nav .nav-item a {font-size: 16px; line-height: 16px; padding: 12px 30px !important; color: var(--e-global-color-primary) !important;}
|
||||
.navbar-nav .active > a {color: var(--e-global-color-white) !important; background-color: var(--e-global-color-secondary) !important;}
|
||||
.navbar-nav .nav-item a:hover{color: var(--e-global-color-white) !important; background-color: var(--e-global-color-secondary) !important;}
|
||||
.navbar li {margin: 0 !important; padding: 0;}
|
||||
h1{font-size: 34px; line-height: 42px;}
|
||||
h2 {font-size: 28px; line-height: 32px;}
|
||||
h3{font-size: 24px; line-height: 26px;}
|
||||
h4 {font-size: 20px; line-height: 22px;}
|
||||
h5 {font-size: 22px; line-height: 28px;}
|
||||
p{font-size: 16px; line-height: 24px;}
|
||||
.text-size-18 {font-size: 16px; line-height: 24px;}
|
||||
.banner-section {padding: 54px 0 240px;}
|
||||
.banner-section .banner_content h1{margin-bottom: 8px;}
|
||||
.banner-section .banner_content h3 {margin-bottom: 10px;}
|
||||
.banner-section .banner_content p{margin-bottom: 20px;}
|
||||
.banner-section .banner_content span {font-size: 16px; line-height: 18px;}
|
||||
.banner-section .banner_content .image_apple {margin-right: 5px;}
|
||||
.banner-section .banner_content .image_apple img{width: 141px;}
|
||||
.banner-section .banner_content .image_google img{width: 140px;}
|
||||
.banner-section .bannersidecircle1{display: none;}
|
||||
.banner-section .bannersidecircle2{top: 404px;}
|
||||
.banner-section .bannersidecircle2 img{ width: 40px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2{top: 34px; left: -40px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2 img{width: 218px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback{top: -16px; right: -18px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback img{width: 400px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon{top: 18px; right: 162px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon img{width: 60px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle{top: 80px; right: 152px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle img{width: 26px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone1{ top: 16px; right: -34px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone1 img{width: 265px;}
|
||||
.partner-section .partner_box {padding: 34px 16px; margin-top: -50px;}
|
||||
.partner-section .partner_box li {margin-right: 12px;}
|
||||
.partner-section .partner1 img{width: 118px;}
|
||||
.partner-section .partner2 img{width: 118px;}
|
||||
.aboutus-section {padding: 70px 0 63px;}
|
||||
.aboutus-section .aboutus_text {padding: 20px 0 0;}
|
||||
.basic-feature .featurephoneback {left: -28px;}
|
||||
.basic-feature .featurephoneback img{width: 370px;}
|
||||
.basic-feature .featurephone {left: 70px; top: 36px;}
|
||||
.basic-feature .featurephone img{width: 195px;}
|
||||
.basic-feature .featurephone-over {top: 200px;}
|
||||
.basic-feature .feature-circle {left: -6px; top: 84px;}
|
||||
.basic-feature .feature_content h2 {margin-bottom: 28px;}
|
||||
.basic-feature .feature-box {margin-bottom: 30px;}
|
||||
.basic-feature .feature-box figure{height: 70px; width: 70px; line-height: 70px; margin-bottom: 10px;}
|
||||
.basic-feature .feature_lowercontent h6 {margin-bottom: 5px;}
|
||||
.basic-feature .feature_lowercontent {padding-left: 0;}
|
||||
.basic-feature .feature-design {padding-left: 0px;}
|
||||
.basic-feature {padding-bottom: 37px;}
|
||||
.offer-section {padding: 254px 0 70px; margin-top: -184px;}
|
||||
.offer-section .offer_content p {padding: 0 30px 0px 30px;}
|
||||
.offer-section .offer_content .offer-apple img{width: 142px;}
|
||||
.offer-section .offer_content .offer-google img{width: 140px;}
|
||||
.search-section {padding: 70px 0 90px;}
|
||||
.search-section .search_content .search-icon {height: 70px; width: 70px; line-height: 70px; margin-bottom: 10px;}
|
||||
.search-section .search_content h2 {margin-bottom: 10px;}
|
||||
.search-section .search_content p {padding-right: 16px;}
|
||||
.search-section .search_content .p-text {margin-bottom: 20px;}
|
||||
.search-section .try_free_btn {padding: 14px 24px;}
|
||||
.search-section .search_wrapper .search-phoneback {right: -28px; top: 32px;}
|
||||
.search-section .search_wrapper .search-phoneback img{width: 410px;}
|
||||
.search-section .search_wrapper .search-phone1 {right: -37px; top: 25px;}
|
||||
.search-section .search_wrapper .search-phone1 img {width: 270px;}
|
||||
.search-section .search_wrapper .search-phone2 {left: -82px; top: -2px;}
|
||||
.search-section .search_wrapper .search-phone2 img {width: 270px;}
|
||||
.manage-section {padding: 117px 0 0 0;}
|
||||
.manage-section .manage_content {padding-left: 30px;}
|
||||
.search-section .manage-icon{height: 70px; width: 70px; line-height: 70px; margin-bottom: 10px;}
|
||||
.manage-section .manage_content h2 {margin-bottom: 10px;}
|
||||
.manage-section .manage_content .p-text {margin-bottom: 20px;}
|
||||
.manage-section .manage_wrapper .manage-sidecircle {left: -30px; top: -4px;}
|
||||
.manage-section .manage_wrapper .manage-sidecircle img {width: 40px;}
|
||||
.manage-section .manage_wrapper .manage-phoneback {right: -38px; top: 26px;}
|
||||
.manage-section .manage_wrapper .manage-phoneback img {width: 400px;}
|
||||
.manage-section .manage_wrapper .manage-phone2 {right: 0px; top: -2px;}
|
||||
.manage-section .manage_wrapper .manage-phone2 img {width: 190px;}
|
||||
.manage-section .manage_wrapper .manage-phone1 {left: 0px; top: -12px;}
|
||||
.manage-section .manage_wrapper .manage-phone1 img {width: 164px;}
|
||||
.statistics-section {padding: 70px 0;}
|
||||
.statistics-section .statistics-sidelayer img {width: 535px;}
|
||||
.statistics-section .statistics_content p {margin-bottom: 35px;}
|
||||
.statistics-section .statistics-value .value1 {font-size: 38px; line-height: 32px;}
|
||||
.statistics-section .statistics-value .plus {font-size: 20px; line-height: 22px;}
|
||||
.statistics-section .statistics-value .text1 {font-size: 18px; line-height: 18px;}
|
||||
.price-section {padding: 70px 0 74px;}
|
||||
.price-section .price-circle {top: -442px; right: -376px;}
|
||||
.price-block .price-sidecircle {top: -34px;}
|
||||
.price-block .price-sidecircle img{width: 40px;}
|
||||
.price-section .price_heading h2 {margin-bottom: 30px;}
|
||||
.price-section .price-block .price_content {padding: 30px 10px;}
|
||||
.price-section .price_content .icon-size1 {height: 90px; width: 90px; line-height: 90px;}
|
||||
.price-section .price_content .text1 {font-size: 30px; line-height: 36px;}
|
||||
.price-section .price_content .for-space {margin-bottom: 20px;}
|
||||
.price-section .price_content .get_started {font-size: 16px; line-height: 16px;padding: 18px 30px;}
|
||||
.accordian-section {padding: 70px 0;}
|
||||
.accordian_content h2 {margin-bottom: 30px;}
|
||||
.accordian-section .faq_shape {top: -40px; left: -4px;}
|
||||
.accordian-section .faq_shape img{width: 40px;}
|
||||
.accordian-section .accordian-inner .accordion-card h6 {line-height: 40px;}
|
||||
.accordian-section .accordion-card .btn-link:before {font-size: 26px; line-height: 26px; right: 0; top: 32%;}
|
||||
.accordian-section .accordian-inner .accordion-card .btn {padding: 0px;}
|
||||
.available-section {padding: 64px 0 70px;}
|
||||
.available-section .available_content h2 {font-size: 44px; line-height: 54px; padding-right: 60px; margin-bottom: 6px;}
|
||||
.available-section .available_content p {line-height: 28px; padding-right: 32px; margin-bottom: 18px;}
|
||||
.available-section .available_content .available-apple img {width: 141px;}
|
||||
.available-section .available_wrapper .available-phone1 {left: -172px; top: -114px;}
|
||||
.available-section .available_wrapper .available-phone1 img {width: 320px;}
|
||||
.available-section .available_wrapper .available-phone3 {top: 186px; left: -120px;}
|
||||
.available-section .available_wrapper .available-phone3 img {width: 352px;}
|
||||
.available-section .available-phone2 {top: 142px;}
|
||||
.available-section .available-phone2 img {width: 280px;}
|
||||
.footer-section {padding: 68px 0 0px;}
|
||||
.footer-section .middle-portion .footer-logo {margin-bottom: 32px;}
|
||||
.footer-section .middle-portion .footer-logo img{width: 130px;}
|
||||
.footer-section .middle-portion .icons ul li {margin-right: 12px;}
|
||||
.footer-section .heading {font-size: 26px; line-height: 22px; margin-bottom: 24px;}
|
||||
.footer-section .text {font-size: 16px; line-height: 30px;}
|
||||
.footer-section .middle-portion .links {padding-left: 60px;}
|
||||
.footer-section .middle-portion .aboutus {padding-left: 70px;}
|
||||
.footer-section .middle-portion {margin-bottom: 30px;}
|
||||
.footer-section .footer-lower {padding: 20px 0;}
|
||||
.footer-section .footer-lower .text-size-18 {font-size: 16px; line-height: 18px;}
|
||||
/* About */
|
||||
.sub-banner {border-radius: 0 0 100px 100px;}
|
||||
.sub-banner .banner-section {padding: 46px 0 67px;}
|
||||
.sub-banner .banner-section .bannersidecircle1 {top: 16px; display: block;}
|
||||
.sub-banner .banner-section .bannersidecircle2 {top: 78px;}
|
||||
.sub-banner .banner-section .banner_content .box {padding: 3px 15px; margin-bottom: 22px;}
|
||||
.sub-banner .banner-section .banner_content .box span {font-size: 16px; line-height: 24px;}
|
||||
.sub-banner .banner-section .banner_content .box figure {margin: 0 9px;}
|
||||
.sub-banner .banner-section .banner_content p {padding: 0px 60px;}
|
||||
.about-section {padding: 190px 0 70px;}
|
||||
.about-section .price-circle {top: -352px; right: -370px;}
|
||||
.about-section .price-sidecircle {right: -12px; top: -38px;}
|
||||
.about-section .price-sidecircle img {width: 40px;}
|
||||
.about-section .about_content .icon-size1 {height: 122px; width: 122px; line-height: 122px; margin-bottom: 24px;}
|
||||
.about-section .about_content h3 {font-size: 28px;}
|
||||
.about-section .about_content {padding: 35px 15px;}
|
||||
.count-section {padding: 70px 0;}
|
||||
.count-section .count_content .offer-apple img {width: 142px;}
|
||||
.count-section .count_content .offer-google img {width: 140px;}
|
||||
.count-section .count-rightcontent .value1 {font-size: 38px; line-height: 32px;}
|
||||
.count-section .count-rightcontent .plus1 {font-size: 20px; line-height: 22px;}
|
||||
.count-section .count-rightcontent .text1 {font-size: 18px; line-height: 18px;}
|
||||
.count-section .count-rightcontent .number1 {padding: 28px 16px 26px;}
|
||||
.team-section .teams-background {padding: 175px 0;}
|
||||
.team-section .our-teams-wrapper {margin-top: -284px;}
|
||||
.team-section .teams-background figure img {width: 385px;}
|
||||
.team-section .our-teams-wrapper .team_content h2 {margin-bottom: 30px;}
|
||||
.team-section .our-teams-wrapper .team-box .lower-part {padding: 20px;}
|
||||
.team-section .our-teams-wrapper .team-box .lower-part p {font-size: 16px; line-height: 20px; margin-bottom: 12px;}
|
||||
.team-section .our-teams-wrapper .team-box .lower-part ul li {margin-right: 11px;}
|
||||
.review-section {padding: 40px 0 70px;}
|
||||
.review-section .review_content .content-box .circle{height: 85px; width: 85px; line-height: 85px;}
|
||||
.review-section .review_content .content-box .circle .review-circlecoma img {width: 40px;}
|
||||
.review-section .review-sidecircle {top: 66px; left: 8px;}
|
||||
.review-section .review-sidecircle img{width: 40px;}
|
||||
.review-section .review_content .content-box {padding: 70px 28px 25px;}
|
||||
.review-section .review_content h2 {margin-bottom: 64px;}
|
||||
/* FAQ */
|
||||
.faq-section {padding: 186px 0 70px;}
|
||||
/* Feature About */
|
||||
.feature-aboutsection {padding: 188px 0 50px;}
|
||||
.feature_aboutheading h2{margin-bottom: 30px;}
|
||||
.feature-aboutsection .feature_aboutcontent .icon-size1 {height: 100px; width: 100px; line-height: 100px;}
|
||||
.feature-aboutsection .feature_aboutcontent h5 {font-size: 20px; line-height: 30px;}
|
||||
.feature-aboutsection .feature-block .feature_aboutcontent {padding: 50px 0 42px;}
|
||||
.feature-basicfeature {padding: 70px 0 85px;}
|
||||
/* Contact */
|
||||
.message-section .message_content {padding: 40px 24px;}
|
||||
.message-section .message_content h2 {margin-bottom: 20px;}
|
||||
.message-section .manage_content {padding-left: 30px;}
|
||||
.message-section .message_content {padding: 35px 20px;}
|
||||
.message-section .message_content input {font-size: 16px; line-height: 22px; padding: 10px; margin-bottom: 15px;}
|
||||
.message-section .message_content textarea {font-size: 16px; line-height: 22px; height: 130px; padding: 15px 10px; margin-bottom: 10px;}
|
||||
.message-section .message_content .submit_now {font-size: 16px; line-height: 16px; padding: 15px 50px;}
|
||||
.message-section .manage_wrapper .manage-phoneback {right: -44px; top: 40px;}
|
||||
.message-section .manage_wrapper .manage-phoneback img {width: 400px;}
|
||||
.message-section .manage_wrapper .manage-phone2 {right: 0px; top: 32px;}
|
||||
.message-section .manage_wrapper .manage-phone2 img {width: 190px;}
|
||||
.message-section .manage_wrapper .manage-phone1 {left: 0px; top: 20px;}
|
||||
.message-section .manage_wrapper .manage-phone1 img {width: 164px;}
|
||||
.contact-section {padding: 66px 0 54px;}
|
||||
.contact-section .feature-block .feature_aboutcontent {padding: 40px 0;}
|
||||
.contact-section .feature-block .feature_aboutcontent .icon-size1 {height: 90px; width: 90px; line-height: 90px;}
|
||||
/* Pricing */
|
||||
.outer_background .sub-banner .banner-section {padding: 46px 0 178px;}
|
||||
.pricing-section {padding: 0 0 53px; margin-top: -113px;}
|
||||
.pricing-section .pricing-box {padding: 15px; margin-bottom: 15px;}
|
||||
.pricing-section .pricing_content .icon-size1 {height: 90px; width: 90px; line-height: 90px;}
|
||||
.pricing-section .pricing_content {padding: 10px 0;}
|
||||
.pricing-section .pricing-box .text-size-18 {font-size: 16px; margin-bottom: 8px;}
|
||||
.pricing-section .pricing-box .content1 {padding: 30px 0 0 15px;}
|
||||
.pricing-section .pricing-box .content3 {padding: 18px 0 0;}
|
||||
.pricing-section .pricing-box .text1 {font-size: 30px; line-height: 45px;}
|
||||
.pricing-section .pricing-box .get_started {font-size: 16px; line-height: 16px; padding: 10px 22px;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px){
|
||||
.navbar-collapse {width: 40%; top: 55px;}
|
||||
.navbar {padding: 20px 0;}
|
||||
/* .navbar-brand figure img {width: 140px;} */
|
||||
h1{font-size: 30px; line-height: 38px;}
|
||||
h2 {font-size: 26px; line-height: 30px;}
|
||||
h3{font-size: 22px; line-height: 26px;}
|
||||
h6 {font-size: 18px; line-height: 22px;}
|
||||
.banner-section {padding: 34px 0 85px;}
|
||||
.banner-section .banner_content { padding-top: 0px; text-align: center; margin-bottom: 50px;}
|
||||
.banner-section .banner_content h1{margin-bottom: 19px; padding: 0 15px;}
|
||||
.banner-section .banner_content p{margin-bottom: 18px;}
|
||||
.banner-section .banner_content span{margin-bottom: 15px;}
|
||||
.banner-section .banner_content .image_google img {width: 120px;}
|
||||
.banner-section .banner_content .image_apple img {width: 120px;}
|
||||
.banner-section .bannersidecircle2{top: 276px;}
|
||||
.banner-section .bannersidecircle2 img{width: 32px;}
|
||||
.banner-section .banner_wrapper2 {position: relative; text-align: center;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2{top: 20px; left: 56px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback{top: -32px; right: 8px; position: relative;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon{top: -18px; right: 230px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon img{width: 73px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle{top: 63px; right: 212px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle img {width: 30px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone1{right: 32px;}
|
||||
.partner-section {text-align: center;}
|
||||
.partner-section .partner_box {padding: 20px 25px;}
|
||||
.partner-section .partner_box li {margin-right: 30px; margin-bottom: 25px;}
|
||||
.aboutus-section {padding: 60px 0 14px; text-align: center;}
|
||||
.aboutus-section .aboutus_content h2 {margin-bottom: 16px !important;}
|
||||
.aboutus-section .aboutus_text { padding: 0;}
|
||||
.basic-feature .feature_wrapperleft{text-align: center; margin-bottom: 130px;}
|
||||
.basic-feature .featurephoneback {left: 0; position: relative;}
|
||||
.basic-feature .featurephone {left: 163px;}
|
||||
.basic-feature .featurephone-over {right: 32px;}
|
||||
.basic-feature .feature-circle {left: 80px; top: 80px;}
|
||||
.basic-feature .feature_wrapperright{text-align: center;}
|
||||
.basic-feature .feature-box figure{height: 70px; width: 70px; line-height: 70px; margin-bottom: 10px;}
|
||||
.basic-feature .feature_lowercontent h6 {margin-bottom: 2px;}
|
||||
.basic-feature .feature-design {padding-left: 0px;}
|
||||
.basic-feature {padding-bottom: 28px;}
|
||||
.offer-section {padding: 184px 0 58px; margin-top: -122px;}
|
||||
.offer-section .offer_content p {padding: 0;}
|
||||
.offer-section .offer_content .offer-google img{width: 120px;}
|
||||
.offer-section .offer_content .offer-apple img{width: 120px;}
|
||||
.offer-section .offer-sidelayer {display: none;}
|
||||
.search-section {padding: 60px 0 100px;}
|
||||
.search-section .search_content{text-align: center;}
|
||||
.search-section .search_content p {padding-right: 0px;}
|
||||
.search-section .search_wrapper{text-align: center;}
|
||||
.search-section .search_wrapper .search-sidecircle {left: 10px; top: 85px;}
|
||||
.search-section .search_wrapper .search-phoneback {right: 50px; top: 60px;}
|
||||
.search-section .search_wrapper .search-phone1 {right: 29px; top: 44px;}
|
||||
.search-section .search_wrapper .search-phone1 img {width: 280px;}
|
||||
.search-section .search_wrapper .search-phone2 {left: 18px; top: 30px;}
|
||||
.search-section .search_content .search-icon{padding-left: 0;}
|
||||
.manage-section {padding: 490px 0 0 0;}
|
||||
.manage-section .manage_wrapper{text-align: center; position: relative;}
|
||||
.manage-section .manage_wrapper .manage-sidecircle {left: 36px; top: 70px;}
|
||||
.manage-section .manage_wrapper .manage-phoneback {right: 0; top: 40px; position: relative; text-align: center;}
|
||||
.manage-section .manage_wrapper .manage-phone2 {right: 80px; top: 36px;}
|
||||
.manage-section .manage_wrapper .manage-phone1 {left: 100px; top: 26px;}
|
||||
.manage-section .manage_content{text-align: center; padding-left: 0px; margin-bottom: 30px;}
|
||||
.search-section .manage-icon {padding-left: 0;}
|
||||
.statistics-section {padding: 60px 0 35px;}
|
||||
.statistics-section .statistics-sidelayer img {width: 440px;}
|
||||
.statistics-section .statistics_content h4 {margin-bottom: 8px;}
|
||||
.statistics-section .statistics_content h2 {margin-bottom: 16px;}
|
||||
.statistics-section .statistics_content p {padding: 0;}
|
||||
.statistics-section .statistics-value .number2{border-right: none;}
|
||||
.statistics-section .statistics-value .number1 {text-align: center; border: 1px solid #69a0f7; margin-bottom: 30px; padding: 20px;}
|
||||
.statistics-section .statistics-value .number4{border-right: 1px solid #69a0f7;}
|
||||
.statistics-section .statistics-value .value1 {font-size: 34px; line-height: 30px;}
|
||||
.statistics-section .statistics-value .text1 {font-size: 16px; line-height: 16px;}
|
||||
.price-section {padding: 58px 0 60px;}
|
||||
.price-block .price-sidecircle {top: -36px;}
|
||||
.price-section .price-block .price_content2 {margin-bottom: 0;}
|
||||
.accordian-section {padding: 60px 0;}
|
||||
.available-section {padding: 58px 0 235px;}
|
||||
.accordian-section .accordion-card .btn-link:before {font-size: 20px; line-height: 20px; top: 36%;}
|
||||
.accordian-section .accordion-card {margin-bottom: 16px; padding: 0 18px;}
|
||||
.accordian-section .accordian-inner .accordion-card h6 {line-height: 30px;}
|
||||
.accordian-section .accordian-inner .card-body {padding: 18px 0;}
|
||||
.available-section .available_content{text-align: center; margin-bottom: 100px;}
|
||||
.available-section .available_content h2 {font-size: 38px; line-height: 44px; padding: 0; margin-bottom: 10px;}
|
||||
.available-section .available_content p {line-height: 26px; padding: 0; margin-bottom: 24px;}
|
||||
.available-section .available_content .available-google img {width: 120px;}
|
||||
.available-section .available_content .available-apple img {width: 120px;}
|
||||
.available-section .available_wrapper{text-align: center;}
|
||||
.available-section .available_wrapper .available-phone1 {left: 0px; top: -60px;}
|
||||
.available-section .available_wrapper .available-phone3 {top: 175px; left: 0; position: relative;}
|
||||
.available-section .available-phone2 { top: 380px;}
|
||||
.footer-section {padding: 60px 0 0px;}
|
||||
.footer-section .middle-portion {margin-bottom: 20px;}
|
||||
.footer-section .middle-portion .services li:last-child{margin-bottom: 30px;}
|
||||
.footer-section .footer-lower .text-size-18 {text-align: center;}
|
||||
.footer-section .heading {font-size: 24px; line-height: 20px; margin-bottom: 15px;}
|
||||
.footer-section .middle-portion .links {padding-left: 0;}
|
||||
.footer-section .footer-lower {padding: 15px 0;}
|
||||
/* About */
|
||||
.sub-banner .banner-section {padding: 40px 0 10px;}
|
||||
.sub-banner .banner-section .bannersidecircle1 {top: 12px; left: 40px;}
|
||||
.sub-banner .banner-section .bannersidecircle1 img{width: 40px;}
|
||||
.sub-banner .banner-section .bannersidecircle2 {top: 66px;}
|
||||
.sub-banner .banner-section .banner_content .box {padding: 3px 10px; margin-bottom: 18px;}
|
||||
.sub-banner .banner-section .banner_content h1 {padding: 0px;}
|
||||
.sub-banner .banner-section .banner_content p {padding: 0px;}
|
||||
.sub-banner .banner-section .banner_content .box figure img{width: 12px;}
|
||||
.about-section {padding: 180px 0 60px;}
|
||||
.about-section .about_content { padding: 30px 10px;margin-bottom: 30px;}
|
||||
.about-section .about_content1 {margin-bottom: 0px;}
|
||||
.about-section .about_content .icon-size1 {height: 112px; width: 112px; line-height: 112px; margin-bottom: 20px;}
|
||||
.about-section .about_content h3 {font-size: 26px;}
|
||||
.count-section {padding: 65px 0 60px;}
|
||||
.count-section .count_content {text-align: center; margin-bottom: 40px;}
|
||||
.count-section .count_content .offer-apple img {width: 120px;}
|
||||
.count-section .count_content .offer-google img {width: 120px;}
|
||||
.count-section .count-rightcontent .value1 {font-size: 34px; line-height: 30px;}
|
||||
.count-section .count-rightcontent .text1 {font-size: 16px; line-height: 16px;}
|
||||
.count-section .count-rightcontent .number1 {padding: 26px 14px 24px;}
|
||||
.team-section .teams-background {padding: 172px 0;}
|
||||
.team-section .our-teams-wrapper .team_content h2 {margin-bottom: 26px;}
|
||||
.team-section .our-teams-wrapper .team-box{text-align: center;}
|
||||
.team-section .our-teams-wrapper .team-box .upper-part img{width: 100%;}
|
||||
.team-section .our-teams-wrapper .team-box .lower-part {padding: 16px 0;}
|
||||
.review-section {padding: 35px 0 60px;}
|
||||
.review-section .review_content .content-box .circle {height: 80px; width: 80px; line-height: 80px;}
|
||||
.review-section .review_content h2 {margin-bottom: 56px;}
|
||||
.review-section .review_content .content-box {padding: 60px 9px 15px;}
|
||||
.review-section .review-sidecircle {top: 50px; left: 8px;}
|
||||
.review-section .review_content h6 {line-height: 20px; font-size: 16px; margin-bottom: 0px;}
|
||||
.review-section .review_content p {margin-bottom: 14px;}
|
||||
.review-section .review_content span {font-size: 14px; line-height: 18px; margin-bottom: 4px;}
|
||||
#carouselExampleControls .carousel-control-prev {top: 70px;}
|
||||
#carouselExampleControls .carousel-control-next {top: 70px;}
|
||||
/* FAQ */
|
||||
.faq-section .accordian_content h2 {margin-bottom: 25px;}
|
||||
/* Feature About */
|
||||
.feature-aboutsection {padding: 182px 0 40px;}
|
||||
.feature_aboutheading h2 {margin-bottom: 25px;}
|
||||
.feature-aboutsection .feature-block .feature_aboutcontent {padding: 35px 40px;}
|
||||
.feature-aboutsection .feature_aboutcontent .icon-size1 {height: 94px; width: 94px; line-height: 94px;}
|
||||
.feature-basicfeature {padding: 28px 0 78px;}
|
||||
/* Contact */
|
||||
.message-section {padding: 154px 0 60px;}
|
||||
.message-section .message_content input {padding: 8px; margin-bottom: 12px;}
|
||||
.message-section .message_content textarea {height: 120px; padding: 15px 8px; margin-bottom: 8px;}
|
||||
.message-section .price-sidecircle {right: 22px; top: 18px;}
|
||||
.message-section .manage_wrapper{text-align: center; position: relative; margin-bottom: 80px;}
|
||||
.message-section .manage_wrapper .manage-sidecircle {left: 36px; top: 70px;}
|
||||
.message-section .manage_wrapper .manage-phoneback {right: 0; top: 54px; position: relative; text-align: center;}
|
||||
.message-section .manage_wrapper .manage-phone2 {right: 80px; top: 36px;}
|
||||
.message-section .manage_wrapper .manage-phone1 {left: 100px; top: 26px;}
|
||||
.message-section .manage_content{padding-left: 0px;}
|
||||
.message-section .message_content {padding: 30px 20px;}
|
||||
.contact-section {padding: 56px 0 44px;}
|
||||
.contact-section .feature-block .feature_aboutcontent {padding: 30px 20px;}
|
||||
/* Pricing */
|
||||
.pricing-section {padding: 0 0 40px;}
|
||||
.pricing-section .price-circle {display: none;}
|
||||
.pricing-section .pricing-box {padding: 20px; margin-bottom: 20px;}
|
||||
.pricing-section .pricing-box .content1 {padding: 30px 0 0 30px;}
|
||||
.outer_background .sub-banner .banner-section {padding: 40px 0 120px;}
|
||||
.pricing-section .pricing-box .content3 {padding: 18px 0 0 12px;}
|
||||
.pricing-section .pricing-box .text1 {font-size: 28px; line-height: 42px;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px){
|
||||
.navbar-collapse { width: 55%; top: 52px;}
|
||||
/* .navbar-brand {width: 130px;} */
|
||||
.navbar { padding: 16px 0;}
|
||||
p{font-size: 14px; line-height: 22px;}
|
||||
.banner-section {padding: 38px 0 133px;}
|
||||
.banner-section .banner_content h1{margin-bottom: 10px; padding: 0;}
|
||||
.banner-section .banner_content p{margin-bottom: 20px;}
|
||||
.banner-section .banner_content span {font-size: 14px; line-height: 16px;}
|
||||
.banner-section .bannersidecircle2{top: 325px;}
|
||||
.banner-section .bannersidecircle2 img {width: 26px;}
|
||||
.banner_outer .bannersidelayer img {width: 286px;}
|
||||
.banner-section .banner_content {margin-bottom: 60px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2{top: 20px; left: -4px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone2 img{ width: 185px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback{top: -34px; right: 6px;}
|
||||
.banner-section .banner_wrapper2 .bannerphoneback img{width: 318px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon{ top: 2px; right: 158px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circleicon img{width: 48px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle{top: 52px; right: 150px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone-circle img {width: 22px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone1{top: -6px; right: -8px;}
|
||||
.banner-section .banner_wrapper2 .bannerphone1 img{width: 222px;}
|
||||
.partner-section .partner_box {margin-top: -100px;}
|
||||
.partner-section .partner_box {padding: 20px;}
|
||||
.partner-section .partner_box li {margin-right: 23px; margin-bottom: 18px;}
|
||||
.aboutus-section {padding: 62px 0 106px;}
|
||||
.aboutus_text p {line-height: 20px;}
|
||||
.basic-feature .feature_wrapperright {padding: 0;}
|
||||
.basic-feature .feature_wrapperleft {text-align: center; margin-bottom: 16px;}
|
||||
.basic-feature .featurephoneback {left: 3px; top: -36px;}
|
||||
.basic-feature .featurephoneback img {width: 328px;}
|
||||
.basic-feature .featurephone {left: 93px; top: -53px;}
|
||||
.basic-feature .featurephone img {width: 164px;}
|
||||
.basic-feature .feature-circle {left: 24px; top: -34px;}
|
||||
.basic-feature .feature-circle img {width: 54px;}
|
||||
.basic-feature .featurephone-over {right: -8px; top: 96px;}
|
||||
.basic-feature .featurephone-over img {width: 190px;}
|
||||
.basic-feature {padding-bottom: 26px;}
|
||||
.offer-section {padding: 144px 0 60px; margin-top: -80px;}
|
||||
.offer-videosection .image-sidecircle {display: none;}
|
||||
.search-section .search_wrapper .search-sidecircle {left: 10px; top: 76px;}
|
||||
.search-section .search_wrapper .search-sidecircle img {width: 50px;}
|
||||
.search-section .search_wrapper .search-phoneback {right: -8px; top: 70px;}
|
||||
.search-section .search_wrapper .search-phoneback img {width: 346px;}
|
||||
.search-section .search_wrapper .search-phone1 {right: -14px; top: 50px;}
|
||||
.search-section .search_wrapper .search-phone1 img {width: 250px;}
|
||||
.search-section .search_wrapper .search-phone2 {left: -10px; top: 32px;}
|
||||
.search-section .search_wrapper .search-phone2 img {width: 250px;}
|
||||
.search-section .try_free_btn {font-size: 16px; line-height: 16px;}
|
||||
.manage-section {padding: 440px 0 0 0;}
|
||||
.manage-section .manage_wrapper .manage-sidecircle {left: 0; top: 40px;}
|
||||
.manage-section .manage_wrapper .manage-phoneback {right: 10px;}
|
||||
.manage-section .manage_wrapper .manage-phoneback img {width: 350px;}
|
||||
.manage-section .manage_wrapper .manage-phone2 {right: 18px;}
|
||||
.manage-section .manage_wrapper .manage-phone2 img {width: 157px;}
|
||||
.manage-section .manage_wrapper .manage-phone1 {left: 40px;}
|
||||
.manage-section .manage_wrapper .manage-phone1 img {width: 136px;}
|
||||
.statistics-section .statistics-sidelayer img {width: 350px;}
|
||||
.statistics-section .statistics-value .value1 {font-size: 30px; line-height: 28px;}
|
||||
.price-section {padding: 62px 0 64px;}
|
||||
.price-block .price-sidecircle {top: -80px; right: 10px;}
|
||||
.accordian-section {padding: 60px 0 62px;}
|
||||
.accordian-section .accordion-card .btn-link:before {right: -10px;}
|
||||
.accordian-section .faq_shape {top: -84px; left: 8px;}
|
||||
.accordian-section .accordian-inner .accordion-card h6 {line-height: 26px;}
|
||||
.accordian-section .accordion-card {padding: 0 30px 0 10px;}
|
||||
.accordian-section .accordian-inner .card-body {padding: 15px 0;}
|
||||
.available-section {padding: 56px 0 402px;}
|
||||
.available-section .available_content h2 {font-size: 32px; line-height: 36px; padding: 0; margin-bottom: 10px;}
|
||||
.available-section .available_content p {line-height: 24px; padding: 0; margin-bottom: 24px;}
|
||||
.available-section .available_wrapper .available-phone1 {left: 0px; top: 115px;}
|
||||
.available-section .available_wrapper .available-phone3 {display: none;}
|
||||
.available-section .available-phone2 {top: 346px;}
|
||||
.footer-section .middle-portion .footer-logo {margin-bottom: 20px;}
|
||||
.footer-section .footer-lower .text-size-18 {font-size: 14px; line-height: 16px;}
|
||||
.footer-section .middle-portion .icons {margin-bottom: 30px; text-align: center;}
|
||||
.footer-section .middle-portion .links {padding-left: 0; text-align: center;}
|
||||
/* About */
|
||||
.sub-banner {border-radius: 0 0 70px 70px;}
|
||||
.sub-banner .banner-section {padding: 40px 0 55px;}
|
||||
.sub-banner .banner-section .banner_content {margin-bottom: 0px;}
|
||||
.sub-banner .bannersidelayer img {width: 286px;}
|
||||
.sub-banner .banner-section .bannersidecircle1 {display: none;}
|
||||
.sub-banner .banner-section .banner_content .box span {font-size: 14px; line-height: 22px;}
|
||||
.sub-banner .banner-section .banner_content .box {margin-bottom: 14px;}
|
||||
.sub-banner .banner-section .banner_content h1 {margin-bottom: 6px;}
|
||||
.about-section {padding: 182px 0 60px;}
|
||||
.about-section .about_content .icon-size1 {height: 102px; width: 102px; line-height: 102px; margin-bottom: 16px;}
|
||||
.about-section .about_content h3 {font-size: 24px;}
|
||||
.about-section .about_content {margin-bottom: 20px;}
|
||||
.about-section .price-sidecircle {right: 0; top: -58px;}
|
||||
.count-section .count_content {margin-bottom: 35px;}
|
||||
.count-section .count-rightcontent .value1 {font-size: 30px; line-height: 28px;}
|
||||
.review-section .review_content .content-box {padding: 50px 9px 15px;}
|
||||
.review-section .review_content h2 {margin-bottom: 50px;}
|
||||
.review-section .review_content .content-box .circle {height: 75px; width: 75px; line-height: 75px;}
|
||||
.review-section .review_content .content-box .circle .review-circlecoma img {width: 36px;}
|
||||
.review-section .review-sidecircle {top: 36px;}
|
||||
.review-section .review_content span {margin-bottom: 0;}
|
||||
#carouselExampleControls .carousel-control-prev {left: -10px; font-size: 18px; line-height: 18px;}
|
||||
#carouselExampleControls .carousel-control-next {right: -10px; font-size: 18px; line-height: 18px;}
|
||||
/* FAQ */
|
||||
.faq-section .accordian_content h2 {margin-bottom: 20px;}
|
||||
.faq-section .accordion-card .btn-link:before {top: 36%; right: -10px; font-size: 18px; line-height: 18px;}
|
||||
.faq-section .accordion-card {padding: 0 18px;}
|
||||
.faq-section .accordian-inner .accordion-card h6 {line-height: 24px; font-size: 16px;}
|
||||
/* Feature About */
|
||||
.feature-aboutsection {padding: 178px 0 48px;}
|
||||
.feature_aboutheading h2 {margin-bottom: 20px;}
|
||||
.feature-aboutsection .feature-block .feature_aboutcontent {padding: 30px 15px;}
|
||||
.feature-basicfeature {padding: 114px 0 129px;}
|
||||
/* Contact */
|
||||
.message-section {padding: 208px 0 62px;}
|
||||
.message-section .message_content input {font-size: 14px; line-height: 20px;}
|
||||
.message-section .message_content textarea {height: 110px; font-size: 14px; line-height: 20px;}
|
||||
.message-section .manage_wrapper .manage-phoneback {right: 10px; top: -18px;}
|
||||
.message-section .manage_wrapper .manage-phoneback img {width: 350px;}
|
||||
.message-section .manage_wrapper .manage-phone2 {right: 18px; top: -18px;}
|
||||
.message-section .manage_wrapper .manage-phone2 img {width: 157px;}
|
||||
.message-section .manage_wrapper .manage-phone1 {left: 40px; top: -28px;}
|
||||
.message-section .manage_wrapper .manage-phone1 img {width: 136px;}
|
||||
.message-section .manage_wrapper {margin-bottom: 30px;}
|
||||
.contact-section {padding: 56px 0 44px;}
|
||||
.message-section .message_content .submit_now {padding: 12px 50px;}
|
||||
/* Pricing */
|
||||
.outer_background .sub-banner .banner-section {padding: 46px 0 166px;}
|
||||
.pricing-section .pricing-box {padding: 20px;}
|
||||
.pricing-section .pricing-box .content1 {padding: 20px 0 0 20px;}
|
||||
.pricing-section .pricing-box .content3 {padding: 0; text-align: center;}
|
||||
.pricing-section .pricing-box .price-button {text-align: center; padding-left: 0;}
|
||||
.pricing-section .pricing-box .get_started {padding: 12px 28px;}
|
||||
.pricing-section .pricing-box .text1 {font-size: 26px; line-height: 32px; margin-bottom: 10px;}
|
||||
}
|
||||
1600
src/styles/template_5/style.css
Normal file
1600
src/styles/template_5/style.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user