From f4188e1dda4f5901cad3378a972f8fb71bae7c13 Mon Sep 17 00:00:00 2001 From: liyang <2234333815@qq.com> Date: Wed, 13 Dec 2023 16:05:10 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E7=94=B5=E5=BD=B1=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=A2=9E=E6=B7=BB=E4=BA=86=E5=88=86=E9=A1=B5=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.py | 27 +- static/assets/css/style.css | 1459 ++++++++++++++++++----------------- templates/index.html | 4 +- templates/movie.html | 26 +- templates/score.html | 4 +- templates/team.html | 4 +- templates/word.html | 14 +- 7 files changed, 793 insertions(+), 745 deletions(-) diff --git a/app.py b/app.py index 8c7292e..e423f4a 100644 --- a/app.py +++ b/app.py @@ -1,6 +1,7 @@ import sqlite3 -from flask import Flask, render_template +from flask import Flask, render_template, request +from flask_paginate import Pagination app = Flask(__name__) @@ -16,19 +17,31 @@ def home(): return index() -@app.route('/movie') +@app.route('/movie', methods=['GET']) def movie(): - datalist = [] + page = request.args.get('page', 1, type=int) + per_page = 10 + con = sqlite3.connect('movieTop250.db') cur = con.cursor() sql = 'select * from movie250' - data = cur.execute(sql) - for item in data: - datalist.append(item) + data = cur.execute(sql).fetchall() # 获取所有数据 cur.close() con.close() - return render_template('movie.html', movies=datalist) + paginated_data = paginate_data(data, page, per_page) + + pagination = Pagination(page=page, total=len(data), per_page=per_page) + print(pagination.total) + print(pagination.per_page) + print(pagination.pages) + return render_template('movie.html', movies=paginated_data, pagination=pagination) + +def paginate_data(data, page, per_page): + start = (page - 1) * per_page + end = start + per_page + paginated_data = data[start:end] + return paginated_data @app.route('/score') def score(): diff --git a/static/assets/css/style.css b/static/assets/css/style.css index 9a0facd..29996fc 100644 --- a/static/assets/css/style.css +++ b/static/assets/css/style.css @@ -1,132 +1,139 @@ - /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ body { - font-family: "Open Sans", sans-serif; - color: #444; + font-family: "Open Sans", sans-serif; + color: #444; } a { - color: #428bca; + color: #428bca; } a:hover { - color: #9eccf4; - text-decoration: none; + color: #9eccf4; + text-decoration: none; } h1, h2, h3, h4, h5, h6, .font-primary { - font-family: "Raleway", sans-serif; + font-family: "Raleway", sans-serif; } /*-------------------------------------------------------------- # Back to top button --------------------------------------------------------------*/ .back-to-top { - position: fixed; - display: none; - width: 40px; - height: 40px; - border-radius: 3px; - right: 15px; - bottom: 15px; - background: #428bca; - color: #fff; - transition: display 0.5s ease-in-out; - z-index: 99999; + position: fixed; + display: none; + width: 40px; + height: 40px; + border-radius: 3px; + right: 15px; + bottom: 15px; + background: #428bca; + color: #fff; + transition: display 0.5s ease-in-out; + z-index: 99999; } .back-to-top i { - font-size: 24px; - position: absolute; - top: 8px; - left: 8px; + font-size: 24px; + position: absolute; + top: 8px; + left: 8px; } .back-to-top:hover { - color: #fff; - background: #629fd3; - transition: background 0.2s ease-in-out; + color: #fff; + background: #629fd3; + transition: background 0.2s ease-in-out; } /*-------------------------------------------------------------- # Top Bar --------------------------------------------------------------*/ #topbar { - background: #fff; - padding: 10px 0; - border-bottom: 1px solid #eee; - font-size: 14px; + background: #fff; + padding: 10px 0; + border-bottom: 1px solid #eee; + font-size: 14px; } #topbar .contact-info a { - line-height: 1; - color: #444; - transition: 0.3s; + line-height: 1; + color: #444; + transition: 0.3s; } #topbar .contact-info a:hover { - color: #428bca; + color: #428bca; } #topbar .contact-info i { - color: #428bca; - padding: 4px; + color: #428bca; + padding: 4px; } #topbar .contact-info .icofont-phone { - padding-left: 20px; - margin-left: 10px; + padding-left: 20px; + margin-left: 10px; } #topbar .social-links a { - color: #5c768d; - padding: 4px 12px; - display: inline-block; - line-height: 1px; - transition: 0.3s; + color: #5c768d; + padding: 4px 12px; + display: inline-block; + line-height: 1px; + transition: 0.3s; } #topbar .social-links a:hover { - color: #428bca; + color: #428bca; +} + +.tlinks { + text-indent: -9999px; + height: 0; + line-height: 0; + font-size: 0; + overflow: hidden; } -.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} + /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ #header { - height: 70px; - transition: all 0.5s; - transition: all 0.5s; - padding: 10px 0; - background: #fff; - z-index: 997; + height: 70px; + transition: all 0.5s; + transition: all 0.5s; + padding: 10px 0; + background: #fff; + z-index: 997; } #header.header-scrolled { - box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } #header .logo h1 { - font-size: 28px; - margin: 0; - padding: 10px 0; - line-height: 1; - font-weight: 400; - letter-spacing: 3px; - text-transform: uppercase; + font-size: 28px; + margin: 0; + padding: 10px 0; + line-height: 1; + font-weight: 400; + letter-spacing: 3px; + text-transform: uppercase; } #header .logo h1 a, #header .logo h1 a:hover { - color: #1c5c93; - text-decoration: none; + color: #1c5c93; + text-decoration: none; } #header .logo img { - padding: 0; - margin: 0; - max-height: 40px; + padding: 0; + margin: 0; + max-height: 40px; } /*-------------------------------------------------------------- @@ -134,1207 +141,1217 @@ h1, h2, h3, h4, h5, h6, .font-primary { --------------------------------------------------------------*/ /* Desktop Navigation */ .nav-menu, .nav-menu * { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } .nav-menu > ul > li { - position: relative; - white-space: nowrap; - float: left; + position: relative; + white-space: nowrap; + float: left; } .nav-menu a { - display: block; - position: relative; - color: #5c768d; - padding: 12px 15px; - transition: 0.3s; - font-size: 14px; - font-family: "Open Sans", sans-serif; + display: block; + position: relative; + color: #5c768d; + padding: 12px 15px; + transition: 0.3s; + font-size: 14px; + font-family: "Open Sans", sans-serif; } .nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a { - color: #428bca; - text-decoration: none; + color: #428bca; + text-decoration: none; } .nav-menu .drop-down ul { - display: block; - position: absolute; - left: 0; - top: 100%; - z-index: 99; - opacity: 0; - visibility: hidden; - padding: 10px 0; - background: #fff; - box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); - transition: ease all 0.3s; + display: block; + position: absolute; + left: 0; + top: 100%; + z-index: 99; + opacity: 0; + visibility: hidden; + padding: 10px 0; + background: #fff; + box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); + transition: ease all 0.3s; } .nav-menu .drop-down:hover > ul { - opacity: 1; - top: 100%; - visibility: visible; + opacity: 1; + top: 100%; + visibility: visible; } .nav-menu .drop-down li { - min-width: 180px; - position: relative; + min-width: 180px; + position: relative; } .nav-menu .drop-down ul a { - padding: 10px 20px; - font-size: 14px; - font-weight: 500; - text-transform: none; - color: #103453; + padding: 10px 20px; + font-size: 14px; + font-weight: 500; + text-transform: none; + color: #103453; } .nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a { - color: #428bca; + color: #428bca; } .nav-menu .drop-down > a:after { - content: "\ea99"; - font-family: IcoFont; - padding-left: 5px; + content: "\ea99"; + font-family: IcoFont; + padding-left: 5px; } .nav-menu .drop-down .drop-down ul { - top: 0; - left: 100%; + top: 0; + left: 100%; } .nav-menu .drop-down .drop-down:hover > ul { - opacity: 1; - top: 0; + opacity: 1; + top: 0; } .nav-menu .drop-down .drop-down > a { - padding-right: 35px; + padding-right: 35px; } .nav-menu .drop-down .drop-down > a:after { - content: "\eaa0"; - font-family: IcoFont; - position: absolute; - right: 15px; + content: "\eaa0"; + font-family: IcoFont; + position: absolute; + right: 15px; } @media (max-width: 1366px) { - .nav-menu .drop-down .drop-down ul { - left: -90%; - } - .nav-menu .drop-down .drop-down:hover > ul { - left: -100%; - } - .nav-menu .drop-down .drop-down > a:after { - content: "\ea9d"; - } + .nav-menu .drop-down .drop-down ul { + left: -90%; + } + + .nav-menu .drop-down .drop-down:hover > ul { + left: -100%; + } + + .nav-menu .drop-down .drop-down > a:after { + content: "\ea9d"; + } } /* Mobile Navigation */ .mobile-nav { - position: fixed; - top: 0; - bottom: 0; - z-index: 9999; - overflow-y: auto; - left: -260px; - width: 260px; - padding-top: 18px; - background: #1f3548; - transition: 0.4s; + position: fixed; + top: 0; + bottom: 0; + z-index: 9999; + overflow-y: auto; + left: -260px; + width: 260px; + padding-top: 18px; + background: #1f3548; + transition: 0.4s; } .mobile-nav * { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } .mobile-nav a { - display: block; - position: relative; - color: #e3f0fc; - padding: 10px 20px; - font-weight: 500; + display: block; + position: relative; + color: #e3f0fc; + padding: 10px 20px; + font-weight: 500; } .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { - color: #9eccf4; - text-decoration: none; + color: #9eccf4; + text-decoration: none; } .mobile-nav .drop-down > a:after { - content: "\ea99"; - font-family: IcoFont; - padding-left: 10px; - position: absolute; - right: 15px; + content: "\ea99"; + font-family: IcoFont; + padding-left: 10px; + position: absolute; + right: 15px; } .mobile-nav .active.drop-down > a:after { - content: "\eaa0"; + content: "\eaa0"; } .mobile-nav .drop-down > a { - padding-right: 35px; + padding-right: 35px; } .mobile-nav .drop-down ul { - display: none; - overflow: hidden; + display: none; + overflow: hidden; } .mobile-nav .drop-down li { - padding-left: 20px; + padding-left: 20px; } .mobile-nav-toggle { - position: fixed; - right: 15px; - top: 20px; - z-index: 9998; - border: 0; - background: none; - font-size: 24px; - transition: all 0.4s; - outline: none !important; - line-height: 1; - cursor: pointer; - text-align: right; + position: fixed; + right: 15px; + top: 20px; + z-index: 9998; + border: 0; + background: none; + font-size: 24px; + transition: all 0.4s; + outline: none !important; + line-height: 1; + cursor: pointer; + text-align: right; } .mobile-nav-toggle i { - color: #5c768d; + color: #5c768d; } .mobile-nav-overly { - width: 100%; - height: 100%; - z-index: 9997; - top: 0; - left: 0; - position: fixed; - background: rgba(31, 53, 72, 0.7); - overflow: hidden; - display: none; + width: 100%; + height: 100%; + z-index: 9997; + top: 0; + left: 0; + position: fixed; + background: rgba(31, 53, 72, 0.7); + overflow: hidden; + display: none; } .mobile-nav-active { - overflow: hidden; + overflow: hidden; } .mobile-nav-active .mobile-nav { - left: 0; + left: 0; } .mobile-nav-active .mobile-nav-toggle i { - color: #fff; + color: #fff; } /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ #hero { - width: 100%; - height: calc(100vh - 114px); - padding: 0; - overflow: hidden; + width: 100%; + height: calc(100vh - 114px); + padding: 0; + overflow: hidden; } #hero .carousel-item { - width: 100%; - height: calc(100vh - 114px); - background-size: cover; - background-position: top right; - background-repeat: no-repeat; - overflow: hidden; + width: 100%; + height: calc(100vh - 114px); + background-size: cover; + background-position: top right; + background-repeat: no-repeat; + overflow: hidden; } #hero .carousel-item::before { - content: ''; - background-color: rgba(13, 30, 45, 0.6); - position: absolute; - height: 100%; - width: 100%; - top: 0; - right: 0; - left: 0; - bottom: 0; - overflow: hidden; + content: ''; + background-color: rgba(13, 30, 45, 0.6); + position: absolute; + height: 100%; + width: 100%; + top: 0; + right: 0; + left: 0; + bottom: 0; + overflow: hidden; } #hero .carousel-container { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - bottom: 0; - top: 0; - left: 0; - right: 0; - overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; + overflow: hidden; } #hero .carousel-content { - text-align: left; + text-align: left; } @media (max-width: 992px) { - #hero, #hero .carousel-item { - height: calc(100vh - 70px); - } - #hero .carousel-content.container { - padding: 0 50px; - } + #hero, #hero .carousel-item { + height: calc(100vh - 70px); + } + + #hero .carousel-content.container { + padding: 0 50px; + } } #hero h2 { - color: #fff; - margin-bottom: 30px; - font-size: 48px; - font-weight: 900; + color: #fff; + margin-bottom: 30px; + font-size: 48px; + font-weight: 900; } #hero p { - width: 80%; - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; - color: #fff; + width: 80%; + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; + color: #fff; } #hero .carousel-inner .carousel-item { - transition-property: opacity; - background-position: center top; + transition-property: opacity; + background-position: center top; } #hero .carousel-inner .carousel-item, #hero .carousel-inner .active.carousel-item-left, #hero .carousel-inner .active.carousel-item-right { - opacity: 0; + opacity: 0; } #hero .carousel-inner .active, #hero .carousel-inner .carousel-item-next.carousel-item-left, #hero .carousel-inner .carousel-item-prev.carousel-item-right { - opacity: 1; - transition: 0.5s; + opacity: 1; + transition: 0.5s; } #hero .carousel-inner .carousel-item-next, #hero .carousel-inner .carousel-item-prev, #hero .carousel-inner .active.carousel-item-left, #hero .carousel-inner .active.carousel-item-right { - left: 0; - transform: translate3d(0, 0, 0); + left: 0; + transform: translate3d(0, 0, 0); } #hero .carousel-control-prev, #hero .carousel-control-next { - width: 10%; + width: 10%; } #hero .carousel-control-next-icon, #hero .carousel-control-prev-icon { - background: none; - font-size: 48px; - line-height: 1; - width: auto; - height: auto; + background: none; + font-size: 48px; + line-height: 1; + width: auto; + height: auto; } #hero .carousel-indicators li { - cursor: pointer; + cursor: pointer; } #hero .btn-get-started { - font-family: "Raleway", sans-serif; - font-weight: 500; - font-size: 14px; - letter-spacing: 1px; - display: inline-block; - padding: 12px 32px; - border-radius: 5px; - transition: 0.5s; - line-height: 1; - margin: 10px; - color: #fff; - -webkit-animation-delay: 0.8s; - animation-delay: 0.8s; - border: 0; - background: #428bca; + font-family: "Raleway", sans-serif; + font-weight: 500; + font-size: 14px; + letter-spacing: 1px; + display: inline-block; + padding: 12px 32px; + border-radius: 5px; + transition: 0.5s; + line-height: 1; + margin: 10px; + color: #fff; + -webkit-animation-delay: 0.8s; + animation-delay: 0.8s; + border: 0; + background: #428bca; } #hero .btn-get-started:hover { - background: #1c5c93; + background: #1c5c93; } @media (max-width: 768px) { - #hero h2 { - font-size: 28px; - } + #hero h2 { + font-size: 28px; + } } @media (min-width: 1024px) { - #hero p { - width: 60%; - } - #hero .carousel-control-prev, #hero .carousel-control-next { - width: 5%; - } + #hero p { + width: 60%; + } + + #hero .carousel-control-prev, #hero .carousel-control-next { + width: 5%; + } } /*-------------------------------------------------------------- # Sections General --------------------------------------------------------------*/ section { - padding: 60px 0; + padding: 60px 0; } .section-bg { - background-color: #f5f9fc; + background-color: #f5f9fc; } .section-title { - text-align: center; - padding-bottom: 30px; + text-align: center; + padding-bottom: 30px; } .section-title h2 { - font-size: 32px; - font-weight: 600; - margin-bottom: 20px; - padding-bottom: 0; - color: #5c768d; + font-size: 32px; + font-weight: 600; + margin-bottom: 20px; + padding-bottom: 0; + color: #5c768d; } .section-title p { - margin-bottom: 0; + margin-bottom: 0; } /*-------------------------------------------------------------- # About Us --------------------------------------------------------------*/ .about { - padding-bottom: 30px; + padding-bottom: 30px; } .about .container { - box-shadow: 0 5px 25px 0 rgba(214, 215, 216, 0.6); + box-shadow: 0 5px 25px 0 rgba(214, 215, 216, 0.6); } .about .video-box img { - padding: 15px 0; + padding: 15px 0; } .about .section-title p { - text-align: left; - font-style: italic; - color: #666; + text-align: left; + font-style: italic; + color: #666; } .about .about-content { - padding: 40px; + padding: 40px; } .about .icon-box + .icon-box { - margin-top: 40px; + margin-top: 40px; } .about .icon-box .icon { - float: left; - display: flex; - align-items: center; - justify-content: center; - width: 72px; - height: 72px; - background: #f1f7fb; - border-radius: 6px; - transition: 0.5s; + float: left; + display: flex; + align-items: center; + justify-content: center; + width: 72px; + height: 72px; + background: #f1f7fb; + border-radius: 6px; + transition: 0.5s; } .about .icon-box .icon i { - color: #428bca; - font-size: 32px; + color: #428bca; + font-size: 32px; } .about .icon-box:hover .icon { - background: #428bca; + background: #428bca; } .about .icon-box:hover .icon i { - color: #fff; + color: #fff; } .about .icon-box .title { - margin-left: 95px; - font-weight: 700; - margin-bottom: 10px; - font-size: 18px; - text-transform: uppercase; + margin-left: 95px; + font-weight: 700; + margin-bottom: 10px; + font-size: 18px; + text-transform: uppercase; } .about .icon-box .title a { - color: #343a40; - transition: 0.3s; + color: #343a40; + transition: 0.3s; } .about .icon-box .title a:hover { - color: #428bca; + color: #428bca; } .about .icon-box .description { - margin-left: 95px; - line-height: 24px; - font-size: 14px; + margin-left: 95px; + line-height: 24px; + font-size: 14px; } .about .video-box { - position: relative; + position: relative; } .about .play-btn { - width: 94px; - height: 94px; - background: radial-gradient(#428bca 50%, rgba(66, 139, 202, 0.4) 52%); - border-radius: 50%; - display: block; - position: absolute; - left: calc(50% - 47px); - top: calc(50% - 47px); - overflow: hidden; + width: 94px; + height: 94px; + background: radial-gradient(#428bca 50%, rgba(66, 139, 202, 0.4) 52%); + border-radius: 50%; + display: block; + position: absolute; + left: calc(50% - 47px); + top: calc(50% - 47px); + overflow: hidden; } .about .play-btn::after { - content: ''; - position: absolute; - left: 50%; - top: 50%; - transform: translateX(-40%) translateY(-50%); - width: 0; - height: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-left: 15px solid #fff; - z-index: 100; - transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); + content: ''; + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-40%) translateY(-50%); + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 15px solid #fff; + z-index: 100; + transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } .about .play-btn::before { - content: ''; - position: absolute; - width: 120px; - height: 120px; - -webkit-animation-delay: 0s; - animation-delay: 0s; - -webkit-animation: pulsate-btn 2s; - animation: pulsate-btn 2s; - -webkit-animation-direction: forwards; - animation-direction: forwards; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-timing-function: steps; - animation-timing-function: steps; - opacity: 1; - border-radius: 50%; - border: 5px solid rgba(66, 139, 202, 0.7); - top: -15%; - left: -15%; - background: rgba(198, 16, 0, 0); + content: ''; + position: absolute; + width: 120px; + height: 120px; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation: pulsate-btn 2s; + animation: pulsate-btn 2s; + -webkit-animation-direction: forwards; + animation-direction: forwards; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: steps; + animation-timing-function: steps; + opacity: 1; + border-radius: 50%; + border: 5px solid rgba(66, 139, 202, 0.7); + top: -15%; + left: -15%; + background: rgba(198, 16, 0, 0); } .about .play-btn:hover::after { - border-left: 15px solid #428bca; - transform: scale(20); + border-left: 15px solid #428bca; + transform: scale(20); } .about .play-btn:hover::before { - content: ''; - position: absolute; - left: 50%; - top: 50%; - transform: translateX(-40%) translateY(-50%); - width: 0; - height: 0; - border: none; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-left: 15px solid #fff; - z-index: 200; - -webkit-animation: none; - animation: none; - border-radius: 0; + content: ''; + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-40%) translateY(-50%); + width: 0; + height: 0; + border: none; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 15px solid #fff; + z-index: 200; + -webkit-animation: none; + animation: none; + border-radius: 0; } @-webkit-keyframes pulsate-btn { - 0% { - transform: scale(0.6, 0.6); - opacity: 1; - } - 100% { - transform: scale(1, 1); - opacity: 0; - } + 0% { + transform: scale(0.6, 0.6); + opacity: 1; + } + 100% { + transform: scale(1, 1); + opacity: 0; + } } @keyframes pulsate-btn { - 0% { - transform: scale(0.6, 0.6); - opacity: 1; - } - 100% { - transform: scale(1, 1); - opacity: 0; - } + 0% { + transform: scale(0.6, 0.6); + opacity: 1; + } + 100% { + transform: scale(1, 1); + opacity: 0; + } } /*-------------------------------------------------------------- # About Lists --------------------------------------------------------------*/ .about-lists { - padding: 40px; + padding: 40px; } .about-lists .row { - overflow: hidden; + overflow: hidden; } .about-lists .content-item { - padding: 40px; - border-left: 1px solid #d9e8f4; - border-bottom: 1px solid #d9e8f4; - margin: -1px; + padding: 40px; + border-left: 1px solid #d9e8f4; + border-bottom: 1px solid #d9e8f4; + margin: -1px; } .about-lists .content-item span { - display: block; - font-size: 24px; - font-weight: 400; - color: #9eccf4; + display: block; + font-size: 24px; + font-weight: 400; + color: #9eccf4; } .about-lists .content-item h4 { - font-size: 28px; - font-weight: 400; - padding: 0; - margin: 20px 0; + font-size: 28px; + font-weight: 400; + padding: 0; + margin: 20px 0; } .about-lists .content-item p { - color: #aaaaaa; - font-size: 15px; - margin: 0; - padding: 0; + color: #aaaaaa; + font-size: 15px; + margin: 0; + padding: 0; } @media (max-width: 768px) { - .about-lists .content-item { - padding: 40px 0; - } + .about-lists .content-item { + padding: 40px 0; + } } /*-------------------------------------------------------------- # Counts --------------------------------------------------------------*/ .counts { - padding-bottom: 30px; + padding-bottom: 30px; } .counts .count-box { - box-shadow: 0px 0 16px rgba(0, 0, 0, 0.1); - padding: 30px; - background: #fff; - margin-bottom: 30px; + box-shadow: 0px 0 16px rgba(0, 0, 0, 0.1); + padding: 30px; + background: #fff; + margin-bottom: 30px; } .counts .count-box i { - display: block; - font-size: 64px; - margin-bottom: 15px; + display: block; + font-size: 64px; + margin-bottom: 15px; } .counts .count-box span { - font-size: 42px; - display: block; - font-weight: 700; - color: #1c5c93; + font-size: 42px; + display: block; + font-weight: 700; + color: #1c5c93; } .counts .count-box p { - padding: 0; - margin: 0; - font-family: "Raleway", sans-serif; - font-size: 14px; + padding: 0; + margin: 0; + font-family: "Raleway", sans-serif; + font-size: 14px; } /*-------------------------------------------------------------- # Services --------------------------------------------------------------*/ .services { - padding-bottom: 30px; + padding-bottom: 30px; } .services .icon-box { - margin-bottom: 20px; - text-align: center; + margin-bottom: 20px; + text-align: center; } .services .icon { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .services .icon i { - width: 80px; - height: 80px; - margin-bottom: 20px; - background: #fff; - border-radius: 50%; - transition: 0.5s; - color: #428bca; - font-size: 40px; - overflow: hidden; - padding-top: 20px; - box-shadow: 0px 0 25px rgba(0, 0, 0, 0.15); + width: 80px; + height: 80px; + margin-bottom: 20px; + background: #fff; + border-radius: 50%; + transition: 0.5s; + color: #428bca; + font-size: 40px; + overflow: hidden; + padding-top: 20px; + box-shadow: 0px 0 25px rgba(0, 0, 0, 0.15); } .services .icon-box:hover .icon i { - box-shadow: 0px 0 30px rgba(66, 139, 202, 0.5); + box-shadow: 0px 0 30px rgba(66, 139, 202, 0.5); } .services .title { - font-weight: 600; - margin-bottom: 15px; - font-size: 18px; - position: relative; - padding-bottom: 15px; + font-weight: 600; + margin-bottom: 15px; + font-size: 18px; + position: relative; + padding-bottom: 15px; } .services .title a { - color: #444; - transition: 0.3s; + color: #444; + transition: 0.3s; } .services .title a:hover { - color: #428bca; + color: #428bca; } .services .title::after { - content: ''; - position: absolute; - display: block; - width: 50px; - height: 2px; - background: #428bca; - bottom: 0; - left: calc(50% - 25px); + content: ''; + position: absolute; + display: block; + width: 50px; + height: 2px; + background: #428bca; + bottom: 0; + left: calc(50% - 25px); } .services .description { - line-height: 24px; - font-size: 14px; + line-height: 24px; + font-size: 14px; } /*-------------------------------------------------------------- # Our Portfolio --------------------------------------------------------------*/ .portfolio .portfolio-item { - margin-bottom: 30px; + margin-bottom: 30px; } .portfolio #portfolio-flters { - padding: 0; - margin: 0 0 35px 0; - list-style: none; - text-align: center; + padding: 0; + margin: 0 0 35px 0; + list-style: none; + text-align: center; } .portfolio #portfolio-flters li { - cursor: pointer; - margin: 0 15px 15px 0; - display: inline-block; - padding: 10px 20px; - font-size: 12px; - line-height: 20px; - color: #444; - border-radius: 4px; - text-transform: uppercase; - background: #fff; - margin-bottom: 5px; - transition: all 0.3s ease-in-out; + cursor: pointer; + margin: 0 15px 15px 0; + display: inline-block; + padding: 10px 20px; + font-size: 12px; + line-height: 20px; + color: #444; + border-radius: 4px; + text-transform: uppercase; + background: #fff; + margin-bottom: 5px; + transition: all 0.3s ease-in-out; } .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { - background: #428bca; - color: #fff; + background: #428bca; + color: #fff; } .portfolio #portfolio-flters li:last-child { - margin-right: 0; + margin-right: 0; } .portfolio .portfolio-wrap { - box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08); - transition: 0.3s; - position: relative; - overflow: hidden; + box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08); + transition: 0.3s; + position: relative; + overflow: hidden; } .portfolio .portfolio-wrap img { - transition: 0.3s; + transition: 0.3s; } .portfolio .portfolio-wrap .portfolio-info { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - opacity: 0; - position: absolute; - bottom: 0; - top: 0; - left: 0; - right: 0; - transition: 0.3s; - text-align: center; - background: rgba(31, 53, 72, 0.6); - padding-bottom: 30px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + opacity: 0; + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; + transition: 0.3s; + text-align: center; + background: rgba(31, 53, 72, 0.6); + padding-bottom: 30px; } .portfolio .portfolio-wrap .portfolio-info h4 { - font-size: 20px; - color: #fff; - font-weight: 600; + font-size: 20px; + color: #fff; + font-weight: 600; } .portfolio .portfolio-wrap .portfolio-info p { - color: #fff; - font-size: 14px; - text-transform: uppercase; + color: #fff; + font-size: 14px; + text-transform: uppercase; } .portfolio .portfolio-wrap .portfolio-info a { - color: #428bca; - margin: 0 4px; - font-size: 18px; - line-height: 1; - background-color: #fff; - padding-top: 7px; - border-radius: 50px; - text-align: center; - width: 36px; - height: 35px; - display: inline-block; - transition: 0.3s; + color: #428bca; + margin: 0 4px; + font-size: 18px; + line-height: 1; + background-color: #fff; + padding-top: 7px; + border-radius: 50px; + text-align: center; + width: 36px; + height: 35px; + display: inline-block; + transition: 0.3s; } .portfolio .portfolio-wrap .portfolio-info a:hover { - background: #428bca; - color: #fff; + background: #428bca; + color: #fff; } .portfolio .portfolio-wrap:hover { - box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16); + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16); } .portfolio .portfolio-wrap:hover .portfolio-info { - opacity: 1; - padding-bottom: 0; + opacity: 1; + padding-bottom: 0; } .portfolio .portfolio-wrap:hover img { - transform: scale(1.1); + transform: scale(1.1); } /*-------------------------------------------------------------- # Our Team --------------------------------------------------------------*/ .team { - background: #fff; - padding: 60px 0 30px 0; + background: #fff; + padding: 60px 0 30px 0; } .team .member { - text-align: center; - margin-bottom: 80px; - position: relative; + text-align: center; + margin-bottom: 80px; + position: relative; } .team .member .pic { - border-radius: 4px; - overflow: hidden; + border-radius: 4px; + overflow: hidden; } .team .member img { - transition: all ease-in-out 0.4s; + transition: all ease-in-out 0.4s; } .team .member:hover img { - transform: scale(1.1); + transform: scale(1.1); } .team .member .member-info { - position: absolute; - bottom: -48px; - left: 20px; - right: 20px; - background: linear-gradient(360deg, #5c768d 0%, rgba(92, 118, 141, 0.9) 35%, rgba(140, 167, 191, 0.8) 100%); - padding: 15px 0; - border-radius: 4px; + position: absolute; + bottom: -48px; + left: 20px; + right: 20px; + background: linear-gradient(360deg, #5c768d 0%, rgba(92, 118, 141, 0.9) 35%, rgba(140, 167, 191, 0.8) 100%); + padding: 15px 0; + border-radius: 4px; } .team .member h4 { - font-weight: 700; - margin-bottom: 10px; - font-size: 16px; - color: #fff; - position: relative; - padding-bottom: 10px; + font-weight: 700; + margin-bottom: 10px; + font-size: 16px; + color: #fff; + position: relative; + padding-bottom: 10px; } .team .member h4::after { - content: ''; - position: absolute; - display: block; - width: 50px; - height: 1px; - background: #fff; - bottom: 0; - left: calc(50% - 25px); + content: ''; + position: absolute; + display: block; + width: 50px; + height: 1px; + background: #fff; + bottom: 0; + left: calc(50% - 25px); } .team .member span { - font-style: italic; - display: block; - font-size: 13px; - color: #fff; + font-style: italic; + display: block; + font-size: 13px; + color: #fff; } .team .member .social { - margin-top: 15px; + margin-top: 15px; } .team .member .social a { - transition: color 0.3s; - color: #fff; + transition: color 0.3s; + color: #fff; } .team .member .social a:hover { - color: #9eccf4; + color: #9eccf4; } .team .member .social i { - font-size: 16px; - margin: 0 2px; + font-size: 16px; + margin: 0 2px; } @media (max-width: 992px) { - .team .member { - margin-bottom: 100px; - } + .team .member { + margin-bottom: 100px; + } } /*-------------------------------------------------------------- # Frequently Asked Questions --------------------------------------------------------------*/ .faq { - padding-bottom: 30px; + padding-bottom: 30px; } .faq .faq-item { - margin-bottom: 40px; + margin-bottom: 40px; } .faq .faq-item h4 { - font-size: 20px; - line-height: 28px; - font-weight: 600; - margin-bottom: 15px; - color: #1f3548; + font-size: 20px; + line-height: 28px; + font-weight: 600; + margin-bottom: 15px; + color: #1f3548; } /*-------------------------------------------------------------- # Contact Us --------------------------------------------------------------*/ .contact .info-box { - color: #444; - text-align: center; - box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); - padding: 20px 0 30px 0; - margin-bottom: 30px; - width: 100%; + color: #444; + text-align: center; + box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); + padding: 20px 0 30px 0; + margin-bottom: 30px; + width: 100%; } .contact .info-box i { - font-size: 32px; - color: #428bca; - border-radius: 50%; - padding: 8px; - border: 2px dotted #9eccf4; + font-size: 32px; + color: #428bca; + border-radius: 50%; + padding: 8px; + border: 2px dotted #9eccf4; } .contact .info-box h3 { - font-size: 20px; - color: #666; - font-weight: 700; - margin: 10px 0; + font-size: 20px; + color: #666; + font-weight: 700; + margin: 10px 0; } .contact .info-box p { - padding: 0; - line-height: 24px; - font-size: 14px; - margin-bottom: 0; + padding: 0; + line-height: 24px; + font-size: 14px; + margin-bottom: 0; } .contact .php-email-form { - box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); - padding: 30px; + box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); + padding: 30px; } .contact .php-email-form .validate { - display: none; - color: red; - margin: 0 0 15px 0; - font-weight: 400; - font-size: 13px; + display: none; + color: red; + margin: 0 0 15px 0; + font-weight: 400; + font-size: 13px; } .contact .php-email-form .error-message { - display: none; - color: #fff; - background: #ed3c0d; - text-align: center; - padding: 15px; - font-weight: 600; + display: none; + color: #fff; + background: #ed3c0d; + text-align: center; + padding: 15px; + font-weight: 600; } .contact .php-email-form .sent-message { - display: none; - color: #fff; - background: #18d26e; - text-align: center; - padding: 15px; - font-weight: 600; + display: none; + color: #fff; + background: #18d26e; + text-align: center; + padding: 15px; + font-weight: 600; } .contact .php-email-form .loading { - display: none; - background: #fff; - text-align: center; - padding: 15px; + display: none; + background: #fff; + text-align: center; + padding: 15px; } .contact .php-email-form .loading:before { - content: ""; - display: inline-block; - border-radius: 50%; - width: 24px; - height: 24px; - margin: 0 10px -6px 0; - border: 3px solid #18d26e; - border-top-color: #eee; - -webkit-animation: animate-loading 1s linear infinite; - animation: animate-loading 1s linear infinite; + content: ""; + display: inline-block; + border-radius: 50%; + width: 24px; + height: 24px; + margin: 0 10px -6px 0; + border: 3px solid #18d26e; + border-top-color: #eee; + -webkit-animation: animate-loading 1s linear infinite; + animation: animate-loading 1s linear infinite; } .contact .php-email-form input, .contact .php-email-form textarea { - border-radius: 0; - box-shadow: none; - font-size: 14px; + border-radius: 0; + box-shadow: none; + font-size: 14px; } .contact .php-email-form input::focus, .contact .php-email-form textarea::focus { - background-color: #428bca; + background-color: #428bca; } .contact .php-email-form input { - padding: 20px 15px; + padding: 20px 15px; } .contact .php-email-form textarea { - padding: 12px 15px; + padding: 12px 15px; } .contact .php-email-form button[type="submit"] { - background: #428bca; - border: 0; - padding: 10px 24px; - color: #fff; - transition: 0.4s; + background: #428bca; + border: 0; + padding: 10px 24px; + color: #fff; + transition: 0.4s; } .contact .php-email-form button[type="submit"]:hover { - background: #6aa3d5; + background: #6aa3d5; } @-webkit-keyframes animate-loading { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } @keyframes animate-loading { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } #footer { - background: #587187; - padding: 0 0 30px 0; - color: #fff; - font-size: 14px; + background: #587187; + padding: 0 0 30px 0; + color: #fff; + font-size: 14px; } #footer .footer-top { - background: #5c768d; - border-top: 1px solid #768fa6; - border-bottom: 1px solid #67839c; - padding: 60px 0 30px 0; + background: #5c768d; + border-top: 1px solid #768fa6; + border-bottom: 1px solid #67839c; + padding: 60px 0 30px 0; } #footer .footer-top .footer-info { - margin-bottom: 30px; + margin-bottom: 30px; } #footer .footer-top .footer-info h3 { - font-size: 24px; - margin: 0 0 20px 0; - padding: 2px 0 2px 0; - line-height: 1; - font-weight: 700; + font-size: 24px; + margin: 0 0 20px 0; + padding: 2px 0 2px 0; + line-height: 1; + font-weight: 700; } #footer .footer-top .footer-info p { - font-size: 14px; - line-height: 24px; - margin-bottom: 0; - font-family: "Raleway", sans-serif; - color: #fff; + font-size: 14px; + line-height: 24px; + margin-bottom: 0; + font-family: "Raleway", sans-serif; + color: #fff; } #footer .footer-top .social-links a { - font-size: 18px; - display: inline-block; - background: #768fa6; - color: #fff; - line-height: 1; - padding: 8px 0; - margin-right: 4px; - border-radius: 50%; - text-align: center; - width: 36px; - height: 36px; - transition: 0.3s; + font-size: 18px; + display: inline-block; + background: #768fa6; + color: #fff; + line-height: 1; + padding: 8px 0; + margin-right: 4px; + border-radius: 50%; + text-align: center; + width: 36px; + height: 36px; + transition: 0.3s; } #footer .footer-top .social-links a:hover { - background: #428bca; - color: #fff; - text-decoration: none; + background: #428bca; + color: #fff; + text-decoration: none; } #footer .footer-top h4 { - font-size: 16px; - font-weight: 600; - color: #fff; - position: relative; - padding-bottom: 12px; + font-size: 16px; + font-weight: 600; + color: #fff; + position: relative; + padding-bottom: 12px; } #footer .footer-top .footer-links { - margin-bottom: 30px; + margin-bottom: 30px; } #footer .footer-top .footer-links ul { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } #footer .footer-top .footer-links ul i { - padding-right: 2px; - color: #9eccf4; - font-size: 18px; - line-height: 1; + padding-right: 2px; + color: #9eccf4; + font-size: 18px; + line-height: 1; } #footer .footer-top .footer-links ul li { - padding: 10px 0; - display: flex; - align-items: center; + padding: 10px 0; + display: flex; + align-items: center; } #footer .footer-top .footer-links ul li:first-child { - padding-top: 0; + padding-top: 0; } #footer .footer-top .footer-links ul a { - color: #fff; - transition: 0.3s; - display: inline-block; - line-height: 1; + color: #fff; + transition: 0.3s; + display: inline-block; + line-height: 1; } #footer .footer-top .footer-links ul a:hover { - color: #9eccf4; + color: #9eccf4; } #footer .footer-top .footer-newsletter form { - margin-top: 30px; - background: #fff; - padding: 6px 10px; - position: relative; - border-radius: 4; + margin-top: 30px; + background: #fff; + padding: 6px 10px; + position: relative; + border-radius: 4; } #footer .footer-top .footer-newsletter form input[type="email"] { - border: 0; - padding: 4px; - width: calc(100% - 110px); + border: 0; + padding: 4px; + width: calc(100% - 110px); } #footer .footer-top .footer-newsletter form input[type="submit"] { - position: absolute; - top: 0; - right: 0; - bottom: 0; - border: 0; - background: none; - font-size: 16px; - padding: 0 20px; - background: #428bca; - color: #fff; - transition: 0.3s; - border-radius: 4; + position: absolute; + top: 0; + right: 0; + bottom: 0; + border: 0; + background: none; + font-size: 16px; + padding: 0 20px; + background: #428bca; + color: #fff; + transition: 0.3s; + border-radius: 4; } #footer .footer-top .footer-newsletter form input[type="submit"]:hover { - background: #5295ce; + background: #5295ce; } #footer .copyright { - text-align: center; - padding-top: 30px; + text-align: center; + padding-top: 30px; } #footer .credits { - padding-top: 10px; - text-align: center; - font-size: 13px; - color: #fff; + padding-top: 10px; + text-align: center; + font-size: 13px; + color: #fff; } #footer .credits a { - color: #9eccf4; + color: #9eccf4; +} + +.pagination-container { + display: flex; + justify-content: center; + margin-top: 20px; /* 调整顶部间距 */ } diff --git a/templates/index.html b/templates/index.html index 6a7ba0d..d4f5cd8 100644 --- a/templates/index.html +++ b/templates/index.html @@ -37,9 +37,7 @@