前端服务详情页，详情内页，后端对应功能

controllers/serve.go → controllers/product.go

@@ -5,11 +5,11 @@ import (
 	beego "github.com/beego/beego/v2/server/web"
 )
 
-type ServerController struct {
+type ProductController struct {
 	beego.Controller
 }
 
-func (s *ServerController) Get() {
+func (s *ProductController) Get() {
 	var success []string
 	ptype := s.GetString("ptype")
 	product := service.GetProduct(ptype)
@@ -20,5 +20,5 @@ func (s *ServerController) Get() {
 	}
 	s.Data["Products"] = product
 	s.Data["example"] = success
-	s.TplName = "services.html"
+	s.TplName = "product.html"
 }

controllers/services-detail.go

@@ -0,0 +1,19 @@
+package controllers
+
+import (
+	"cc-officialweb/service"
+	beego "github.com/beego/beego/v2/server/web"
+	"strconv"
+)
+
+type ServicesDetailController struct {
+	beego.Controller
+}
+
+func (s *ServicesDetailController) Get() {
+	getID := s.GetString(":id")
+	atoi, _ := strconv.Atoi(getID)
+	detail := service.GetServiceDetail(atoi)
+	s.Data["serveDetail"] = detail
+	s.TplName = "services-detail.html"
+}

controllers/services.go

@@ -0,0 +1,33 @@
+package controllers
+
+import (
+	"cc-officialweb/service"
+	beego "github.com/beego/beego/v2/server/web"
+	"strconv"
+)
+
+type ServicesController struct {
+	beego.Controller
+}
+
+func (s *ServicesController) Get() {
+	var success []string
+	ptype := s.GetString("ptype")
+	id := s.GetString(":id")
+	atoi, _ := strconv.Atoi(id)
+	product := service.GetProduct(ptype)
+	//获取成功案例轮播图
+	exams := service.GetResource("example")
+	for _, v := range exams {
+		success = append(success, v.Url)
+	}
+	serves := service.GetIndexProductServe("serve")
+	serve := service.GetServicesByID(atoi)
+	getService := service.GetService(atoi)
+	s.Data["GetService"] = getService
+	s.Data["Serve"] = serve
+	s.Data["Serves"] = serves
+	s.Data["Products"] = product
+	s.Data["example"] = success
+	s.TplName = "services.html"
+}

models/products.go

@@ -0,0 +1,25 @@
+package models
+
+import (
+	"gorm.io/gorm"
+	"html/template"
+)
+
+// Products Server Products 产品
+type Products struct {
+	gorm.Model
+	Title               string        `json:"title"`                                      //标题
+	Synopsis            template.HTML `json:"synopsis"`                                   //简介
+	Detail              template.HTML `json:"detail"`                                     //详情
+	Type                string        `json:"type"`                                       //类型 1.产品 2.服务
+	Ptype               string        `json:"ptype"`                                      //产品类型	软件 硬件
+	IsIndex             bool          `json:"isIndex"`                                    //是否首页显示
+	Url                 string        `json:"url"`                                        //图片链接
+	ProductIntroduction string        `json:"product_introduction"`                       //产品介绍
+	TechnicalParameters string        `json:"technical_parameters"`                       //技术参数
+	Instructions        string        `json:"instructions"`                               //使用说明
+	SupportingSoftware  string        `json:"supporting_software" `                       //配套软件
+	OptionalAccessories string        `json:"optional_accessories" gorm:"comment:'可选配件'"` //可选配件
+	IsActive            bool          `json:"is_active" gorm:"comment:'是否激活'"`            //是否激活
+	ParentId            int           `gorm:"comment:'父级id'" json:"parentId"`
+}

models/serve.go

@@ -0,0 +1,16 @@
+package models
+
+import (
+	"gorm.io/gorm"
+	"html/template"
+)
+
+type Server struct {
+	gorm.Model
+	Title     string        `json:"title" gorm:"comment:'标题'"`
+	Synopsis  template.HTML `json:"synopsis" gorm:"comment:'简介'"`     //简介
+	Detail    template.HTML `json:"detail" gorm:"comment:'详情'"`       //详情
+	ProductId uint          `json:"product_id" gorm:"comment:'产品ID'"` //产品id
+	ParentId  int           `gorm:"comment:'父级id'" json:"parentId"`
+	Image     string        `json:"image" gorm:"comment:'图片链接'"`
+}

models/server.go

@@ -1,20 +0,0 @@
-package models
-
-import "gorm.io/gorm"
-
-// Server Products 产品
-type Server struct {
-	gorm.Model
-	Title               string `json:"title"`                //标题
-	Synopsis            string `json:"synopsis"`             //简介
-	Detail              string `json:"detail"`               //详情
-	Type                string `json:"type"`                 //类型 1.产品 2.服务
-	Ptype               string `json:"ptype"`                //产品类型	软件 硬件
-	IsIndex             bool   `json:"isIndex"`              //是否首页显示
-	Url                 string `json:"url"`                  //图片链接
-	ProductIntroduction string `json:"product_introduction"` //产品介绍
-	TechnicalParameters string `json:"technical_parameters"` //技术参数
-	Instructions        string `json:"instructions"`         //使用说明
-	SupportingSoftware  string `json:"supporting_software"`  //配套软件
-	OptionalAccessories string `json:"optional_accessories"` //可选配件
-}

routers/router.go

@@ -8,12 +8,15 @@ import (
 func init() {
 	beego.Router("/", &controllers.MainController{})
 	beego.Router("/about", &controllers.AboutController{})
-	beego.Router("/services", &controllers.ServerController{})
+	beego.Router("/services", &controllers.ServicesController{})
+	beego.Router("/services/:id", &controllers.ServicesController{})
+	beego.Router("/services-detail/:id", &controllers.ServicesDetailController{})
+	beego.Router("/product", &controllers.ProductController{})
 	beego.Router("/product/:id", &controllers.DetailController{})
-	beego.Router("/parameters", &controllers.DetailController{})
-	beego.Router("/product/instructions", &controllers.DetailController{})
-	beego.Router("/product/software", &controllers.DetailController{})
-	beego.Router("/product/accessories", &controllers.DetailController{})
+	beego.Router("/product/:id/parameters", &controllers.DetailController{})
+	beego.Router("/product/:id/instructions", &controllers.DetailController{})
+	beego.Router("/product/:id/software", &controllers.DetailController{})
+	beego.Router("/product/:id/accessories", &controllers.DetailController{})
 
 	beego.Router("/portfolio", &controllers.MainController{})
 	beego.Router("/contact", &controllers.ContactController{})

service/product.go

@@ -6,8 +6,8 @@ import (
 )
 
 // GetIndexProductServe   首页获取产品服务
-func GetIndexProductServe(types string) []models.Server {
-	var serve []models.Server
+func GetIndexProductServe(types string) []models.Products {
+	var serve []models.Products
 	tx := utils.DB.Where("type = ?", types).Where("is_index = ?", true).Find(&serve)
 	if tx.Error != nil {
 		return nil
@@ -16,8 +16,8 @@ func GetIndexProductServe(types string) []models.Server {
 }
 
 // GetProduct   获取所有产品
-func GetProduct(ptype string) []models.Server {
-	var serve []models.Server
+func GetProduct(ptype string) []models.Products {
+	var serve []models.Products
 	tx := utils.DB.Where("type = ?", "product").Where("ptype = ?", ptype).Find(&serve)
 	if tx.Error != nil {
 		return nil
@@ -25,8 +25,8 @@ func GetProduct(ptype string) []models.Server {
 	return serve
 }
 
-func GetProductDetail(id int) models.Server {
-	var server models.Server
+func GetProductDetail(id int) models.Products {
+	var server models.Products
 	tx := utils.DB.Where("id = ?", id).First(&server)
 	if tx.Error != nil {
 		return server
@@ -35,7 +35,7 @@ func GetProductDetail(id int) models.Server {
 }
 
 // AddProduct 添加产品
-func AddProduct(product models.Server) bool {
+func AddProduct(product models.Products) bool {
 	tx := utils.DB.Create(&product)
 	if tx.RowsAffected > 0 {
 		return true

service/services.go

@@ -0,0 +1,36 @@
+package service
+
+import (
+	"cc-officialweb/models"
+	"cc-officialweb/utils"
+)
+
+// GetServicesByID 根据id获得最外层服务
+func GetServicesByID(id int) models.Products {
+	var products models.Products
+	tx := utils.DB.Where("id = ?", id).Where("type=?", "serve").First(&products)
+	if tx.Error != nil {
+		return products
+	}
+	return products
+}
+
+// GetService 根据id获得内层服务
+func GetService(productId int) []models.Server {
+	var services []models.Server
+	tx := utils.DB.Where("product_id=?", productId).Find(&services)
+	if tx.Error != nil {
+		return services
+	}
+	return services
+}
+
+// GetServiceDetail 根据id获得服务详情
+func GetServiceDetail(serId int) models.Server {
+	var servicesDetail models.Server
+	tx := utils.DB.Where("id=?", serId).First(&servicesDetail)
+	if tx.Error != nil {
+		return servicesDetail
+	}
+	return servicesDetail
+}

static/css/style.css

@@ -1343,3 +1343,8 @@ p.help-block li {
     justify-content: center;
   }
 }
+.card-with-image {
+  position: relative;
+  overflow: hidden;
+  min-height: 200px; /* 根据需要调整高度 */
+}

utils/db.go

@@ -23,5 +23,5 @@ func init() {
 		panic(err)
 	}
 	DB.Set("gorm:table_options", "ENGINE=InnoDB").
-		AutoMigrate(&models.Resource{}, &models.Server{})
+		AutoMigrate(&models.Resource{}, &models.Products{}, &models.Server{})
 }

views/about.html

@@ -68,11 +68,11 @@
             <ul class="nav-menu">
                 <li class="menu-active"><a href="/">首页</a></li>
                 <li><a href="about.html">关于我们</a></li>
-                <li><a href="services.html">服务介绍</a></li>
-                <li><a href="">产品介绍</a>
+                <li><a href="product.html">服务介绍</a></li>
+                <li><a href="product?ptype=hardware">产品介绍</a>
                     <ul>
-                        <li><a href="#">软件</a></li>
-                        <li><a href="#">硬件</a></li>
+                        <li><a href="product?ptype=software">软件</a></li>
+                        <li><a href="product?ptype=hardware">硬件</a></li>
                     </ul>
                 </li>
                 <li><a href="portfolio.html">全国代理招募</a></li>

views/contact.html

@@ -68,11 +68,11 @@
       <ul class="nav-menu">
         <li class="menu-active"><a href="/">首页</a></li>
         <li><a href="about.html">关于我们</a></li>
-        <li><a href="services.html">服务介绍</a></li>
-        <li><a href="">产品介绍</a>
+        <li><a href="product.html">服务介绍</a></li>
+        <li><a href="product?ptype=hardware">产品介绍</a>
           <ul>
-            <li><a href="#">软件</a></li>
-            <li><a href="#">硬件</a></li>
+            <li><a href="product?ptype=software">软件</a></li>
+            <li><a href="product?ptype=hardware">硬件</a></li>
           </ul>
         </li>
         <li><a href="portfolio.html">全国代理招募</a></li>

views/index.html

@@ -67,12 +67,12 @@
         <nav id="nav-menu-container">
             <ul class="nav-menu">
                 <li class="menu-active"><a href="/">首页</a></li>
-                <li><a href="about.html">关于我们</a></li>
-                <li><a href="services?ptype=hardware">服务介绍</a></li>
-                <li><a href="">产品介绍</a>
+                <li><a href="/about">关于我们</a></li>
+                <li><a href="/services">服务介绍</a></li>
+                <li><a href="product?ptype=hardware">产品介绍</a>
                     <ul>
-                        <li><a href="#">软件</a></li>
-                        <li><a href="#">硬件</a></li>
+                        <li><a href="product?ptype=software">软件</a></li>
+                        <li><a href="product?ptype=hardware">硬件</a></li>
                     </ul>
                 </li>
                 <li><a href="portfolio.html">全国代理招募</a></li>
@@ -132,20 +132,20 @@
         <div class="container" data-aos="fade-up">
             <div class="section-header" style="margin-top: 40px;">
                 <h2>服务介绍</h2>
-                <p>专业一流的硬件、软件工程师最新设计理念与实现</p>
+                <p>宝智达主要经营冷链温湿度监测平台、储运温湿度监测系统、温湿度监控设备及温湿度记录仪等系列产品、药品专用陈列柜、药品温度实时监测保温箱、冷链验证服务等均具有自主知识产权。</p>
             </div>
             <div class="row">
                 <div class="div1 col-6">
                     {{range .Serves}}
-                    <h4><a href="serve/{{.ID}}">{{.Title}}</a></h4>
+                    <h4><a href="services/{{.ID}}">{{.Title}}</a></h4>
                     <p>{{.Synopsis}}</p>
                     {{end}}
                 </div>
                 <div class="div2 col-6" style="width: 300px;height: auto">
-                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.l3wQbfjVXoyN0EL5poXNhgHaE8?rs=1&pid=ImgDetMain"
+                    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.7f83c191192defcd927bc9ec7b871de6?rik=%2fZCG9Ijrvtj1zQ&riu=http%3a%2f%2f24461182.s21i.faiusr.com%2f2%2fABUIABACGAAgirvb9wUorIHgiwIwnhQ47A4!700x700.jpg&ehk=7JqIISwbE048OAnWpY3m7VL5qRA0YfiGo7d2uqNL4gw%3d&risl=&pid=ImgRaw&r=0"
                          class="img-fluid" alt="">
                 </div>
-                <button class="btn btn-outline-primary"  style="margin-top: 40px;">了解更多</button>
+                <button class="btn btn-outline-primary"  style="margin-top: 40px;" onclick="location.href='/services'">了解更多服务</button>
             </div>
 
         </div>
@@ -169,7 +169,7 @@
                     </div>
                 </div>
                 {{end}}
-                <button class="btn btn-outline-primary" onclick="location.href='services?ptype=hardware'">查看更多</button>
+                <button class="btn btn-outline-primary" onclick="location.href='product?ptype=hardware'">查看更多</button>
             </div>
         </div>
     </section><!-- #services -->

views/portfolio.html

@@ -68,11 +68,11 @@
       <ul class="nav-menu">
         <li class="menu-active"><a href="/">首页</a></li>
         <li><a href="about.html">关于我们</a></li>
-        <li><a href="services.html">服务介绍</a></li>
-        <li><a href="">产品介绍</a>
+        <li><a href="product.html">服务介绍</a></li>
+        <li><a href="product?ptype=hardware">产品介绍</a>
           <ul>
-            <li><a href="#">软件</a></li>
-            <li><a href="#">硬件</a></li>
+            <li><a href="product?ptype=software">软件</a></li>
+            <li><a href="product?ptype=hardware">硬件</a></li>
           </ul>
         </li>
         <li><a href="portfolio.html">全国代理招募</a></li>

views/product-detail.html

@@ -67,22 +67,22 @@
         <nav id="nav-menu-container">
             <ul class="nav-menu">
                 <li class="menu-active"><a href="/">首页</a></li>
-                <li><a href="about.html">关于我们</a></li>
-                <li><a href="services?ptype=hardware">服务介绍</a></li>
-                <li><a href="">产品介绍</a>
+                <li><a href="/about">关于我们</a></li>
+                <li><a href="/services?ptype=hardware">服务介绍</a></li>
+                <li><a href="product?ptype=hardware">产品介绍</a>
                     <ul>
-                        <li><a href="#">软件</a></li>
-                        <li><a href="#">硬件</a></li>
+                        <li><a href="product?ptype=software">软件</a></li>
+                        <li><a href="product?ptype=hardware">硬件</a></li>
                     </ul>
                 </li>
-                <li><a href="portfolio.html">全国代理招募</a></li>
+                <li><a href="/portfolio">全国代理招募</a></li>
                 <li class="menu-has-children"><a href="">新闻</a>
                     <ul>
                         <li><a href="#">公司新闻</a></li>
                         <li><a href="#">行业新闻</a></li>
                     </ul>
                 </li>
-                <li><a href="contact.html">联系我们</a></li>
+                <li><a href="/contact">联系我们</a></li>
             </ul>
         </nav><!-- #nav-menu-container -->
     </div>
@@ -108,22 +108,21 @@
                 <h2>产品详情</h2>
             </div>
             <div class="btn-group" role="group" aria-label="Basic outlined example">
-                <button type="button" class="btn btn-outline-primary" onclick="location.href='{{.detail.ID}}'">产品介绍</button>
-                <button type="button" class="btn btn-outline-primary" onclick="location.href='{{.detail.ID}}/parameters'">技术参数</button>
-                <button type="button" class="btn btn-outline-primary" onclick="location.href='{{.detail.ID}}/instructions'">操作说明</button>
-                <button type="button" class="btn btn-outline-primary" onclick="location.href='{{.detail.ID}}/software'">配套软件</button>
-                <button type="button" class="btn btn-outline-primary" onclick="location.href='{{.detail.ID}}/accessories'">可选配件</button>
+                <button type="button" class="btn btn-outline-primary" id="introduction" onclick="location.href='/product/{{.detail.ID}}'">产品介绍</button>
+                <button type="button" class="btn btn-outline-primary" id="parameters" onclick="location.href='/product/{{.detail.ID}}/parameters'">技术参数</button>
+                <button type="button" class="btn btn-outline-primary" id="instructions" onclick="location.href='/product/{{.detail.ID}}/instructions'">操作说明</button>
+                <button type="button" class="btn btn-outline-primary" id="software" onclick="location.href='/product/{{.detail.ID}}/software'">配套软件</button>
+                <button type="button" class="btn btn-outline-primary" id="accessories" onclick="location.href='/product/{{.detail.ID}}/accessories'">可选配件</button>
             </div>
-            {{if .showSection}}
-            <div class="row" style="margin-top: 10px;">
+
+            <div class="row" style="margin-top: 10px;" id="isShow">
                 <div class="div2 col-6" style="width: 300px;height: auto">
                     <img src="{{.detail.Url}}"
                          class="img-fluid" alt="">
                 </div>
                 <div class="div1 col-6" id="t"></div>
             </div>
-            {{end}}
-            <div id="t1" style="width: 100%;"></div>
+            <div id="t1" style="width: 100%; margin-top: 10px"></div>
         </div>
     </section><!-- #services -->
 
@@ -140,7 +139,7 @@
                         qui officia deserunt mollit anim id est laborum.</p>
                 </div>
                 <div class="col-lg-3 cta-btn-container text-center">
-                    <a class="cta-btn align-middle" href="#contact">联系我们</a>
+                    <a class="cta-btn align-middle" href="/contact">联系我们</a>
                 </div>
             </div>
 
@@ -187,8 +186,28 @@
     window.onload = function () {
         let s = '{{.detail.Detail}}';
         let s1 = '{{.detail.ProductIntroduction}}';
-        let urlParams = new URLSearchParams(window.location.search);
-        console.log(urlParams)
+        let isShow =document.querySelector('#isShow')
+        //获取url
+        let url = window.location.href;
+        let prams =url.split('/')[5]
+        switch (prams){
+            case 'parameters':
+                s1='{{.detail.TechnicalParameters}}'
+                isShow.style.display='none'
+                break;
+            case 'instructions':
+                s1='{{.detail.Instructions}}'
+                isShow.style.display='none'
+                break;
+            case 'software':
+                s1='{{.detail.SupportingSoftware}}'
+                isShow.style.display='none'
+                break;
+            case 'accessories':
+                s1='{{.detail.OptionalAccessories}}'
+                isShow.style.display='none'
+                break;
+        }
         let t = document.getElementById('t');
         let t1 = document.getElementById('t1');
         t.innerHTML = s;

views/product.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>宝智达冷链官网</title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta content="" name="keywords">
+    <meta content="" name="description">
+    <meta content="Author" name="WebThemez">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Favicons -->
+    <link href="../static/img/favicon.png" rel="icon">
+    <link href="../static/img/apple-touch-icon.png" rel="apple-touch-icon">
+
+    <!--字体 -->
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800|Montserrat:300,400,700"
+          rel="stylesheet">
+
+    <!-- Bootstrap CSS File -->
+    <link href="../static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+
+    <!-- Libraries CSS Files -->
+    <link href="../static/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+    <link href="../static/lib/animate/animate.min.css" rel="stylesheet">
+    <link href="../static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
+    <link href="../static/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
+    <link href="../static/lib/magnific-popup/magnific-popup.css" rel="stylesheet">
+    <link href="../static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
+
+    <!-- Main Stylesheet File -->
+    <link href="../static/css/style.css" rel="stylesheet">
+</head>
+
+<body id="body">
+
+<!--==========================
+  Top Bar
+============================-->
+<!--  <section id="topbar" class="d-none d-lg-block">-->
+<!--    <div class="container clearfix">-->
+<!--      <div class="contact-info float-left">-->
+<!--        <i class="fa fa-envelope-o"></i> <a href="mailto:contact@example.com">name@websitename.com</a>-->
+<!--        <i class="fa fa-phone"></i> +1 2345 67855 22-->
+<!--      </div>-->
+<!--      <div class="social-links float-right">-->
+<!--        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>-->
+<!--        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>-->
+<!--        <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>-->
+<!--        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>-->
+<!--        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </section>-->
+
+<!--==========================
+  Header
+============================-->
+<header id="header">
+    <div class="container">
+
+        <div id="logo" class="pull-left">
+            <h1><a href="#body" class="scrollto"><span>宝</span>智达冷链</a></h1>
+            <!-- <a href="#body"><img src="img/logo.png" alt="" title="" /></a>-->
+        </div>
+
+        <nav id="nav-menu-container">
+            <ul class="nav-menu">
+                <li class="menu-active"><a href="/">首页</a></li>
+                <li><a href="about.html">关于我们</a></li>
+                <li><a href="product?ptype=hardware">服务介绍</a></li>
+                <li><a href="product?ptype=hardware">产品介绍</a>
+                    <ul>
+                        <li><a href="product?ptype=software">软件</a></li>
+                        <li><a href="product?ptype=hardware">硬件</a></li>
+                    </ul>
+                </li>
+                <li><a href="portfolio.html">全国代理招募</a></li>
+                <li class="menu-has-children"><a href="">新闻</a>
+                    <ul>
+                        <li><a href="#">公司新闻</a></li>
+                        <li><a href="#">行业新闻</a></li>
+                    </ul>
+                </li>
+                <li><a href="contact.html">联系我们</a></li>
+            </ul>
+        </nav><!-- #nav-menu-container -->
+    </div>
+</header><!-- #header -->
+
+<!--==========================
+  Page Banner Section
+============================-->
+<section id="innerBanner">
+    <div class="inner-content">
+        <h2><span>产品介绍</span><br>We create the opportunities!</h2>
+        <div>
+        </div>
+    </div>
+</section><!-- #Page Banner -->
+
+<main id="main">
+
+    <!--==========================
+      Services Section
+    ============================-->
+    <section id="services">
+        <div class="container">
+            <div class="btn-group" role="group" aria-label="Basic outlined example">
+                <button type="button" class="btn btn-outline-primary" onclick="location.href='product?ptype=hardware'">
+                    硬件
+                </button>
+                <button type="button" class="btn btn-outline-primary" onclick="location.href='product?ptype=software'">
+                    软件
+                </button>
+            </div>
+            <div class="row" style="margin-top: 10px;">
+                {{range .Products}}
+                <div class="col-lg-4">
+                    <div class="box wow fadeInLeft">
+                        <div class="icon svgImg"><img src="{{.Url}}" alt=""></div>
+                        <h4 class="title"><a href="product/{{.ID}}">{{.Title}}</a></h4>
+                        <p class="description">{{.Synopsis}}</p>
+                    </div>
+                </div>
+                {{end}}
+            </div>
+        </div>
+    </section><!-- #services -->
+
+    <!--==========================
+      Clients Section
+    ============================-->
+    <section id="clients" class="wow fadeInUp">
+        <div class="container">
+            <div class="section-header">
+                <h2>部分合作案例</h2>
+                <!--                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro consequatur aliquam,-->
+                <!--                    incidunt fugiat culpa esse aute nulla. duis fugiat culpa esse aute nulla ipsum velit export irure-->
+                <!--                    minim illum fore</p>-->
+            </div>
+            <div class="owl-carousel clients-carousel">
+                {{range $index,$exam:=.example}}
+                <img src="{{$exam}}" alt="..." style="max-width: 100%; height: auto">
+                {{end}}
+            </div>
+        </div>
+    </section><!-- #clients -->
+
+
+    <!--==========================
+      Call To Action Section
+    ============================-->
+    <section id="call-to-action" class="wow fadeInUp">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-9 text-center text-lg-left">
+                    <h3 class="cta-title">获取我们的服务</h3>
+                    <p class="cta-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
+                        consequatur aliquam, incidunt fugiat culpa esse aute nulla cupidatat non proident, sunt in culpa
+                        qui officia deserunt mollit anim id est laborum.</p>
+                </div>
+                <div class="col-lg-3 cta-btn-container text-center">
+                    <a class="cta-btn align-middle" href="#contact">联系我们</a>
+                </div>
+            </div>
+
+        </div>
+    </section><!-- #call-to-action -->
+
+</main>
+
+<!--==========================
+  Footer
+============================-->
+<footer id="footer">
+    <div class="container">
+        <div class="copyright">
+            Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
+                                                                      href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
+        </div>
+        <div class="credits">
+        </div>
+    </div>
+</footer><!-- #footer -->
+
+<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
+
+<!-- JavaScript  -->
+<script src="../static/lib/jquery/jquery.min.js"></script>
+<script src="../static/lib/jquery/jquery-migrate.min.js"></script>
+<script src="../static/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="../static/lib/easing/easing.min.js"></script>
+<script src="../static/lib/superfish/hoverIntent.js"></script>
+<script src="../static/lib/superfish/superfish.min.js"></script>
+<script src="../static/lib/wow/wow.min.js"></script>
+<script src="../static/lib/owlcarousel/owl.carousel.min.js"></script>
+<script src="../static/lib/magnific-popup/magnific-popup.min.js"></script>
+<script src="../static/lib/sticky/sticky.js"></script>
+<script src="contact/jqBootstrapValidation.js"></script>
+<script src="contact/contact_me.js"></script>
+<script src="../static/js/main.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
+</body>
+</html>

views/services-detail.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>宝智达冷链官网</title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta content="" name="keywords">
+    <meta content="" name="description">
+    <meta content="Author" name="WebThemez">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Favicons -->
+    <link href="/static/img/favicon.png" rel="icon">
+    <link href="/static/img/apple-touch-icon.png" rel="apple-touch-icon">
+
+    <!--字体 -->
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800|Montserrat:300,400,700"
+          rel="stylesheet">
+
+    <!-- Bootstrap CSS File -->
+    <link href="/static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+
+    <!-- Libraries CSS Files -->
+    <link href="/static/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+    <link href="/static/lib/animate/animate.min.css" rel="stylesheet">
+    <link href="/static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
+    <link href="/static/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
+    <link href="/static/lib/magnific-popup/magnific-popup.css" rel="stylesheet">
+    <link href="/static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
+
+    <!-- Main Stylesheet File -->
+    <link href="/static/css/style.css" rel="stylesheet">
+</head>
+
+<body id="body">
+<!--==========================
+  Header
+============================-->
+<header id="header">
+    <div class="container">
+
+        <div id="logo" class="pull-left">
+            <h1><a href="#body" class="scrollto"><span>宝</span>智达冷链</a></h1>
+            <!-- <a href="#body"><img src="img/logo.png" alt="" title="" /></a>-->
+        </div>
+
+        <nav id="nav-menu-container">
+            <ul class="nav-menu">
+                <li class="menu-active"><a href="/">首页</a></li>
+                <li><a href="about.html">关于我们</a></li>
+                <li><a href="product?ptype=hardware">服务介绍</a></li>
+                <li><a href="product?ptype=hardware">产品介绍</a>
+                    <ul>
+                        <li><a href="product?ptype=software">软件</a></li>
+                        <li><a href="product?ptype=hardware">硬件</a></li>
+                    </ul>
+                </li>
+                <li><a href="portfolio.html">全国代理招募</a></li>
+                <li class="menu-has-children"><a href="">新闻</a>
+                    <ul>
+                        <li><a href="#">公司新闻</a></li>
+                        <li><a href="#">行业新闻</a></li>
+                    </ul>
+                </li>
+                <li><a href="contact.html">联系我们</a></li>
+            </ul>
+        </nav><!-- #nav-menu-container -->
+    </div>
+</header><!-- #header -->
+
+<!--==========================
+  Page Banner Section
+============================-->
+<section id="innerBanner">
+    <div class="inner-content">
+        <h2><span>{{.serveDetail.Title}}</span><br>We create the opportunities!</h2>
+        <div>
+        </div>
+    </div>
+</section><!-- #Page Banner -->
+
+<main id="main">
+
+    <!--==========================
+      Services Section
+    ============================-->
+    <section id="services">
+        <div class="container">
+
+            <div class="row" style="margin-top: 10px;">
+                <div class="div2 col-6" style="width: 300px;height: auto">
+                    <img src="{{.serveDetail.Image}}"
+                         class="img-fluid" alt="">
+                </div>
+                <div class="div1 col-6">{{.serveDetail.Synopsis}}</div>
+            </div>
+            <div style="text-align: center;">{{.serveDetail.Detail}}</div>
+        </div>
+    </section><!-- #services -->
+    <!--==========================
+      Clients Section
+    ============================-->
+    <section id="clients" class="wow fadeInUp" style="margin-top: 10px;">
+        <div class="container">
+            <div class="section-header">
+                <h2>部分合作案例</h2>
+                <!--                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro consequatur aliquam,-->
+                <!--                    incidunt fugiat culpa esse aute nulla. duis fugiat culpa esse aute nulla ipsum velit export irure-->
+                <!--                    minim illum fore</p>-->
+            </div>
+            <div class="owl-carousel clients-carousel">
+                {{range $index,$exam:=.example}}
+                <img src="{{$exam}}" alt="..." style="max-width: 100%; height: auto">
+                {{end}}
+            </div>
+        </div>
+    </section><!-- #clients -->
+
+
+    <!--==========================
+      Call To Action Section
+    ============================-->
+    <section id="call-to-action" class="wow fadeInUp">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-9 text-center text-lg-left">
+                    <h3 class="cta-title">获取我们的服务</h3>
+                    <p class="cta-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
+                        consequatur aliquam, incidunt fugiat culpa esse aute nulla cupidatat non proident, sunt in culpa
+                        qui officia deserunt mollit anim id est laborum.</p>
+                </div>
+                <div class="col-lg-3 cta-btn-container text-center">
+                    <a class="cta-btn align-middle" href="#contact">联系我们</a>
+                </div>
+            </div>
+
+        </div>
+    </section><!-- #call-to-action -->
+
+</main>
+
+<!--==========================
+  Footer
+============================-->
+<footer id="footer">
+    <div class="container">
+        <div class="copyright">
+            Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
+                                                                      href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
+        </div>
+        <div class="credits">
+        </div>
+    </div>
+</footer><!-- #footer -->
+
+<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
+
+<!-- JavaScript  -->
+<script src="/static/lib/jquery/jquery.min.js"></script>
+<script src="/static/lib/jquery/jquery-migrate.min.js"></script>
+<script src="/static/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="/static/lib/easing/easing.min.js"></script>
+<script src="/static/lib/superfish/hoverIntent.js"></script>
+<script src="/static/lib/superfish/superfish.min.js"></script>
+<script src="/static/lib/wow/wow.min.js"></script>
+<script src="/static/lib/owlcarousel/owl.carousel.min.js"></script>
+<script src="/static/lib/magnific-popup/magnific-popup.min.js"></script>
+<script src="/static/lib/sticky/sticky.js"></script>
+<script src="/static/js/main.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
+</body>
+</html>

views/services.html

@@ -9,50 +9,30 @@
     <meta content="Author" name="WebThemez">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Favicons -->
-    <link href="../static/img/favicon.png" rel="icon">
-    <link href="../static/img/apple-touch-icon.png" rel="apple-touch-icon">
+    <link href="/static/img/favicon.png" rel="icon">
+    <link href="/static/img/apple-touch-icon.png" rel="apple-touch-icon">
 
     <!--字体 -->
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800|Montserrat:300,400,700"
           rel="stylesheet">
 
     <!-- Bootstrap CSS File -->
-    <link href="../static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
 
     <!-- Libraries CSS Files -->
-    <link href="../static/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-    <link href="../static/lib/animate/animate.min.css" rel="stylesheet">
-    <link href="../static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
-    <link href="../static/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
-    <link href="../static/lib/magnific-popup/magnific-popup.css" rel="stylesheet">
-    <link href="../static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
+    <link href="/static/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+    <link href="/static/lib/animate/animate.min.css" rel="stylesheet">
+    <link href="/static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
+    <link href="/static/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
+    <link href="/static/lib/magnific-popup/magnific-popup.css" rel="stylesheet">
+    <link href="/static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
 
     <!-- Main Stylesheet File -->
-    <link href="../static/css/style.css" rel="stylesheet">
+    <link href="/static/css/style.css" rel="stylesheet">
 </head>
 
 <body id="body">
-
-<!--==========================
-  Top Bar
-============================-->
-<!--  <section id="topbar" class="d-none d-lg-block">-->
-<!--    <div class="container clearfix">-->
-<!--      <div class="contact-info float-left">-->
-<!--        <i class="fa fa-envelope-o"></i> <a href="mailto:contact@example.com">name@websitename.com</a>-->
-<!--        <i class="fa fa-phone"></i> +1 2345 67855 22-->
-<!--      </div>-->
-<!--      <div class="social-links float-right">-->
-<!--        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>-->
-<!--        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>-->
-<!--        <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>-->
-<!--        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>-->
-<!--        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--  </section>-->
-
 <!--==========================
   Header
 ============================-->
@@ -68,11 +48,11 @@
             <ul class="nav-menu">
                 <li class="menu-active"><a href="/">首页</a></li>
                 <li><a href="about.html">关于我们</a></li>
-                <li><a href="services?ptype=hardware">服务介绍</a></li>
-                <li><a href="">产品介绍</a>
+                <li><a href="product?ptype=hardware">服务介绍</a></li>
+                <li><a href="product?ptype=hardware">产品介绍</a>
                     <ul>
-                        <li><a href="#">软件</a></li>
-                        <li><a href="#">硬件</a></li>
+                        <li><a href="product?ptype=software">软件</a></li>
+                        <li><a href="product?ptype=hardware">硬件</a></li>
                     </ul>
                 </li>
                 <li><a href="portfolio.html">全国代理招募</a></li>
@@ -93,7 +73,7 @@
 ============================-->
 <section id="innerBanner">
     <div class="inner-content">
-        <h2><span>产品介绍</span><br>We create the opportunities!</h2>
+        <h2><span>服务介绍</span><br>We create the opportunities!</h2>
         <div>
         </div>
     </div>
@@ -106,41 +86,41 @@
     ============================-->
     <section id="services">
         <div class="container">
-            <div class="btn-group" role="group" aria-label="Basic outlined example">
-                <button type="button" class="btn btn-outline-primary" onclick="location.href='services?ptype=hardware'">
-                    硬件
-                </button>
-                <button type="button" class="btn btn-outline-primary" onclick="location.href='services?ptype=software'">
-                    软件
-                </button>
+            <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+                {{range .Serves}}
+                <button type="button" class="btn btn-outline-dark">{{.Title}}</button>
+                {{end}}
             </div>
-            <!--            <ul class="nav nav-tabs">-->
-            <!--                <li class="nav-item">-->
-            <!--                    <a class="nav-link active"  href="services?ptype=hardware">硬件</a>-->
-            <!--                </li>-->
-            <!--                <li class="nav-item">-->
-            <!--                    <a class="nav-link active" href="services?ptype=software">软件</a>-->
-            <!--                </li>-->
-
-            <!--            </ul>-->
             <div class="row" style="margin-top: 10px;">
-                {{range .Products}}
-                <div class="col-lg-4">
-                    <div class="box wow fadeInLeft">
-                        <div class="icon svgImg"><img src="{{.Url}}" alt=""></div>
-                        <h4 class="title"><a href="product/{{.ID}}">{{.Title}}</a></h4>
-                        <p class="description">{{.Synopsis}}</p>
+                <div class="div2 col-6" style="width: 300px;height: auto">
+                    <img src="{{.Serve.Url}}"
+                         class="img-fluid" alt="">
+                </div>
+                <div class="div1 col-6">{{.Serve.Detail}}</div>
+            </div>
+            <div class="container">
+                <div class="section-header">
+                    <h2>{{.Serve.Title}}</h2>
+                </div>
+                <div class="row">
+                    {{range .GetService}}
+                    <div class="col-lg-4 card-with-image" style="background-image: url('{{.Image}}');background-position: center;background-size: cover;">
+                        <div class="box wow fadeInLeft" style="margin-top: 10%;background-color: rgba(0,0,0,0)">
+                            <div class="icon svgImg"></div>
+                            <h4 class="title float-over-title"><a href="/services-detail/{{.ID}}">{{.Title}}</a></h4>
+                            <p class="description">{{.Synopsis}}</p>
+                        </div>
                     </div>
+                    {{end}}
                 </div>
-                {{end}}
+
             </div>
         </div>
     </section><!-- #services -->
-
     <!--==========================
       Clients Section
     ============================-->
-    <section id="clients" class="wow fadeInUp">
+    <section id="clients" class="wow fadeInUp" style="margin-top: 10px;">
         <div class="container">
             <div class="section-header">
                 <h2>部分合作案例</h2>
@@ -196,19 +176,17 @@
 <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
 
 <!-- JavaScript  -->
-<script src="../static/lib/jquery/jquery.min.js"></script>
-<script src="../static/lib/jquery/jquery-migrate.min.js"></script>
-<script src="../static/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
-<script src="../static/lib/easing/easing.min.js"></script>
-<script src="../static/lib/superfish/hoverIntent.js"></script>
-<script src="../static/lib/superfish/superfish.min.js"></script>
-<script src="../static/lib/wow/wow.min.js"></script>
-<script src="../static/lib/owlcarousel/owl.carousel.min.js"></script>
-<script src="../static/lib/magnific-popup/magnific-popup.min.js"></script>
-<script src="../static/lib/sticky/sticky.js"></script>
-<script src="contact/jqBootstrapValidation.js"></script>
-<script src="contact/contact_me.js"></script>
-<script src="../static/js/main.js"></script>
+<script src="/static/lib/jquery/jquery.min.js"></script>
+<script src="/static/lib/jquery/jquery-migrate.min.js"></script>
+<script src="/static/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="/static/lib/easing/easing.min.js"></script>
+<script src="/static/lib/superfish/hoverIntent.js"></script>
+<script src="/static/lib/superfish/superfish.min.js"></script>
+<script src="/static/lib/wow/wow.min.js"></script>
+<script src="/static/lib/owlcarousel/owl.carousel.min.js"></script>
+<script src="/static/lib/magnific-popup/magnific-popup.min.js"></script>
+<script src="/static/lib/sticky/sticky.js"></script>
+<script src="/static/js/main.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
 </body>