asder

.umirc.ts

@@ -27,6 +27,16 @@ export default defineConfig({
           name: '下载中心',
           component: '@/pages/download',
         },
+        {
+          path: '/case',
+          name: '下载中心',
+          component: '@/pages/case',
+        },
+        {
+          path: '/casedetail',
+          name: '下载中心',
+          component: '@/pages/case/casedetail',
+        },
       ],
     },
   ],
@@ -58,7 +68,7 @@ export default defineConfig({
   },
   proxy: {
     '/website/': {
-      target: 'http://192.168.40.110:12345',
+      target: 'http://192.168.40.117:12345',
       changeOrigin: true,
       pathRewrite: { '^': '' },
     },

src/global.less

@@ -257,14 +257,14 @@ body,
   font-size: 16px !important;
 }
 .sections {
-  padding: 2rem;
+  padding: 2rem 10%;
   position: relative;
   .ant-card-body {
     background-color: #f0f0f0;
   }
 }
 .section {
-  padding: 2rem;
+  padding: 2rem 10%;
   position: relative;
   h2 {
     margin-bottom: 1rem;
@@ -1014,3 +1014,8 @@ body,
 .ant-menu-horizontal {
   border: none !important;
 }
+.ant-pagination-total-text {
+  font-size: 0.65rem !important;
+  color: #999999 !important;
+  margin-right: 12px;
+}

src/layouts/index.jsx

@@ -469,7 +469,7 @@ function Layout({ children, location }) {
           </Row>
         </div>
         {!changes && (
-          <div className={styles.navbar} id="mines">
+          <div className={styles.navbar} style={{ opacity: 0 }} id="mines">
             {colls && (
               <Row
                 style={{

src/layouts/index.less

@@ -46,7 +46,7 @@
   position: relative;
   margin-bottom: 60px;
   .menucontent {
-    width: calc(100% - 4rem);
+    width: 80%;
     display: flex;
     justify-content: space-around;
     align-items: center;

src/pages/about/news.jsx

@@ -79,14 +79,14 @@ function Insert() {
         })}
       </Row>
 
-      <div className="center">
+      <div className="center" style={{ marginTop: '2rem' }}>
         <Pagination
           current={page?.pageIndex}
           showQuickJumper
           total={total}
           onChange={onChange}
           showTotal={(total, range) =>
-            `${total} 条中的 ${range[0]}-${range[1]}`
+            `共${total} 条中的 ${range[0]}-${range[1]}`
           }
         />
       </div>

src/pages/about/newsdetail.jsx

@@ -41,12 +41,12 @@ function Insert({ location: { query } }) {
   return (
     <div className="section">
       <h2 className="title">{data?.title}</h2>
-      <p style={{ textAlign: 'center', fontSize: '0.6rem' }}>
-        {data?.releaseTime}
+      <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
+        发布时间：{data?.releaseTime}
       </p>
       <div
         dangerouslySetInnerHTML={{ __html: data?.informationContent }}
-        style={{ fontSize: '0.6rem' }}
+        style={{ fontSize: '0.7rem' }}
         className="html"
       ></div>
       <Divider></Divider>

src/pages/case/casedetail.jsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Row, Col, Image, Pagination, Card, Tag } from 'antd';
+import { useRequest } from 'ahooks';
+import { doFetch } from '@/utils/doFetch';
+import { EyeFilled } from '@ant-design/icons';
+import { history } from 'umi';
+
+const col = { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };
+const { Meta } = Card;
+
+function Insert({ location: { query } }) {
+  const [curid, setcurid] = useState(query.id);
+
+  const { data, loading } = useRequest(
+    async () => {
+      let data = await doFetch({
+        url: '/ngCase/detail',
+        params: { id: curid },
+      });
+      return data?.data?.data;
+    },
+    {
+      refreshDeps: [curid],
+    },
+  );
+
+  return (
+    <div className="container">
+      <div style={{ position: 'relative' }}>
+        <img
+          src={'https://ng-website.oss-cn-hangzhou.aliyuncs.com/D1-banner.jpg'}
+          alt=""
+          style={{ width: '100%' }}
+        />
+        <div
+          className="center"
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            flexDirection: 'column',
+            color: '#ffffff',
+          }}
+        >
+          <p style={{ fontSize: '2vw', marginBottom: '0.4rem' }}>典型案列</p>
+          <p style={{ fontSize: '1vw' }}>
+            始终坚持自主创新，用专业创造价值，凭真诚赢得信赖！
+          </p>
+        </div>
+      </div>
+      <div className="section">
+        <h2 className="title">
+          <img
+            src={data?.picUrl}
+            style={{ height: 44, borderRadius: 6, marginRight: 12 }}
+            alt=""
+          />
+          {data?.title}
+        </h2>
+        <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
+          发布时间：{data?.releaseTime}
+        </p>
+
+        <p style={{ textAlign: 'center', fontSize: '0.75rem' }}>
+          {data?.caseDescribe}
+        </p>
+        <div
+          dangerouslySetInnerHTML={{ __html: data?.content }}
+          style={{ fontSize: '0.7rem' }}
+          className="html"
+        ></div>
+        <p style={{ margin: 0, fontSize: '0.7rem', color: '#999999' }}>
+          相关产品：
+          {data?.ngCaseProductList?.map((it, i) => {
+            return (
+              <Tag
+                style={{
+                  margin: '2px',
+                  padding: '4px 8px',
+                  fontSize: '0.7rem',
+                }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  it?.linkUrl && window.open(it?.linkUrl);
+                }}
+              >
+                {it?.productName}
+              </Tag>
+            );
+          })}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Insert;

src/pages/case/index.jsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Row, Col, Tag, Pagination, Card } from 'antd';
+import { useRequest } from 'ahooks';
+import { doFetch } from '@/utils/doFetch';
+import { EyeFilled } from '@ant-design/icons';
+import { history } from 'umi';
+
+const col = { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };
+const { Meta } = Card;
+
+function Case() {
+  const [page, setpage] = useState({ pageIndex: 1, pageSize: 10 });
+  const [total, settotal] = useState();
+  const { data, loading } = useRequest(
+    async () => {
+      let data = await doFetch({
+        url: '/ngCase/page',
+        params: page,
+      });
+      settotal(data?.data?.page?.total);
+      return data?.data?.page?.records;
+    },
+    {
+      refreshDeps: [page],
+    },
+  );
+
+  const onChange = (pageIndex, pageSize) => {
+    setpage({
+      pageIndex,
+      pageSize,
+    });
+  };
+
+  return (
+    <div>
+      <div style={{ position: 'relative' }}>
+        <img
+          src={'https://ng-website.oss-cn-hangzhou.aliyuncs.com/D1-banner.jpg'}
+          alt=""
+          style={{ width: '100%' }}
+        />
+        <div
+          className="center"
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            flexDirection: 'column',
+            color: '#ffffff',
+          }}
+        >
+          <p style={{ fontSize: '2vw', marginBottom: '0.4rem' }}>典型案列</p>
+          <p style={{ fontSize: '1vw' }}>
+            始终坚持自主创新，用专业创造价值，凭真诚赢得信赖！
+          </p>
+        </div>
+      </div>
+      <div className="section">
+        <Row gutter={24}>
+          {data?.map?.((it, i) => {
+            return (
+              <Col span={24} style={{ marginBottom: 24 }}>
+                <Card
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    borderColor: '#cccccc',
+                    backdropFilter: 'blur(2px)',
+                    backgroundColor: 'rgba(255,255,255,0.7)',
+                  }}
+                  hoverable
+                  onClick={() => {
+                    if (it?.caseLinkUrl) {
+                      window.open(it?.caseLinkUrl);
+                      return;
+                    }
+                    history.push({
+                      pathname: '/casedetail',
+                      query: {
+                        id: it?.id,
+                      },
+                    });
+                  }}
+                >
+                  <div>
+                    <div className="centerl" style={{ marginTop: 20 }}>
+                      <img
+                        style={{ height: 49, marginRight: 12, borderRadius: 4 }}
+                        src={it?.picUrl}
+                        alt=""
+                      />
+                      <span style={{ fontSize: '0.8rem' }} className="oneline">
+                        {it?.title}
+                      </span>
+                    </div>
+
+                    <p style={{ fontSize: '0.6rem', marginTop: '1rem' }}>
+                      {it?.caseDescribe}
+                    </p>
+                    <p
+                      style={{
+                        margin: 0,
+                        fontSize: '0.7rem',
+                        color: '#999999',
+                      }}
+                    >
+                      相关产品：
+                      {it?.ngCaseProductList?.map((it, i) => {
+                        return (
+                          <Tag
+                            style={{
+                              margin: '2px',
+                              padding: '4px 8px',
+                              fontSize: '0.7rem',
+                            }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              it?.linkUrl && window.open(it?.linkUrl);
+                            }}
+                          >
+                            {it?.productName}
+                          </Tag>
+                        );
+                      })}
+                    </p>
+                  </div>
+                </Card>
+              </Col>
+            );
+          })}
+        </Row>
+
+        <div className="center" style={{ marginTop: '2rem' }}>
+          <Pagination
+            current={page?.pageIndex}
+            showQuickJumper
+            total={total}
+            onChange={onChange}
+            showTotal={(total, range) =>
+              `共${total} 条中的 ${range[0]}-${range[1]}`
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Case;

src/pages/case/index.less

+.intro {
+  width: 66vw;
+  text-align: center;
+  margin: auto;
+  margin-bottom: 0.4rem;
+  min-width: 300px !important;
+  font-size: 0.6rem !important;
+}
+.introimg {
+  width: 66vw;
+  margin: 0 auto;
+  display: block;
+  min-width: 300px !important;
+  margin-bottom: 1rem;
+}
+.format {
+  background-color: #f9f9f9;
+  padding: 1.5rem 6vw;
+  h2 {
+    text-align: center;
+    font-size: 1.2rem;
+    margin-bottom: 1.2rem;
+  }
+  p {
+    font-size: 0.6rem;
+  }
+  div {
+    font-size: 0.7rem;
+    background-color: @primary-color;
+    padding: 12px;
+    color: #fff;
+    width: 100px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    margin-bottom: 0.4rem;
+  }
+}
+.ibo {
+  width: calc(100% - 2rem);
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}
+
+.column {
+  column-span: all !important;
+}
+
+@media (min-width: 400px) {
+  .column {
+    column-count: 1; // two columns on larger phones
+    column-gap: 12px;
+  }
+
+  .rt {
+    width: 0px;
+    overflow: hidden;
+    border-left: #ddd solid 1px;
+  }
+}
+
+@media (min-width: 768px) {
+  .column {
+    column-count: 2; // two columns on larger phones
+    column-gap: 12px;
+  }
+
+  .rt {
+    width: 140px;
+    border-left: #ddd solid 1px;
+  }
+}
+
+@media (min-width: 992px) {
+  .column {
+    column-count: 3; // three columns on...you get it
+    column-gap: 12px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .column {
+    column-count: 4; // three columns on...you get it
+    column-gap: 12px;
+  }
+}
+
+@media (min-width: 1660px) {
+  .column {
+    column-count: 6; // three columns on...you get it
+    column-gap: 12px;
+  }
+}
+.item {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  padding-bottom: 12px;
+  overflow: hidden;
+  float: left;
+  > div {
+    width: 100%;
+  }
+  img {
+    width: 100%;
+  }
+  .title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 8px 12px 0 12px;
+    text-align: center;
+    font-size: 0.6rem;
+    font-weight: bolder;
+  }
+}
+
+.join {
+  display: flex;
+  justify-content: center;
+  padding-left: 6vw;
+  h2 {
+    font-size: 1rem;
+    text-indent: 0.5rem;
+  }
+  p {
+    font-size: 0.6rem;
+    position: relative;
+    text-indent: 0.6rem;
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 0.35rem;
+      width: 8px;
+      height: 8px;
+      background-color: #3d67ff;
+      border-radius: 8px;
+      content: '';
+    }
+  }
+}
+.joinus {
+  position: absolute;
+  bottom: 0;
+  padding-left: 6vw;
+  font-size: 2rem;
+  line-height: 3rem;
+  color: #fff;
+}

src/pages/index.jsx

 import styles from './index.less';
 import { Link, history } from 'umi';
 import React, { useState, useEffect, useRef } from 'react';
-import { Carousel, Button, Row, Col, Card, Tooltip, Grid } from 'antd';
+import { Carousel, Button, Row, Col, Card, Tooltip, Grid, Tag } from 'antd';
 import { doFetch } from '@/utils/doFetch';
 import { useRequest } from 'ahooks';
 import { Palette } from 'color-thief-react';
@@ -153,6 +153,12 @@ function IndexPage({ route }) {
     let res = await doFetch({ url: '/realTimeInfo/limitList', params: {} });
     return res?.data?.dataList ?? [];
   });
+
+  const adders = useRequest(async () => {
+    let res = await doFetch({ url: '/ngCase/limitList', params: {} });
+    return res?.data?.dataList ?? [];
+  });
+
   //autoplay
   return (
     <div>
@@ -235,6 +241,8 @@ function IndexPage({ route }) {
                               transition: 'all 1.45s',
                               color,
                               borderColor: color,
+                              height: '42px',
+                              fontSize: 22,
                             }}
                             onClick={(e) => {
                               e.stopPropagation();
@@ -495,7 +503,7 @@ function IndexPage({ route }) {
         </p>
         <Row
           gutter={{ xs: 8, sm: 16, md: 32, lg: 64, xl: 88 }}
-          style={{ marginTop: '2rem', padding: '0 44px' }}
+          style={{ marginTop: '2rem', padding: '0 0px' }}
         >
           <Col
             xs={24}
@@ -652,12 +660,112 @@ function IndexPage({ route }) {
           </Col>
         </Row>
       </div>
+      <div
+        className="section"
+        style={{
+          marginBottom: '1rem',
+          background: `url(https://ng-website.oss-cn-hangzhou.aliyuncs.com/custumeresed.png) no-repeat center`,
+          backgroundSize: 'cover',
+        }}
+      >
+        <h2 className="title">典型案例</h2>
+        <Row
+          gutter={{ xs: 8, sm: 16, md: 32, lg: 38, xl: 44 }}
+          style={{ marginTop: '2rem', padding: '0 0px' }}
+        >
+          {adders?.data?.map((it, i) => {
+            return (
+              <Col
+                xs={24}
+                sm={24}
+                md={12}
+                lg={12}
+                style={{ marginBottom: '1.5rem' }}
+                key={it.id}
+              >
+                <Card
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    borderColor: '#cccccc',
+                    backdropFilter: 'blur(2px)',
+                    backgroundColor: 'rgba(255,255,255,0.7)',
+                  }}
+                  hoverable
+                  onClick={() => {
+                    if (it?.caseLinkUrl) {
+                      window.open(it?.caseLinkUrl);
+                      return;
+                    }
+                    history.push({
+                      pathname: '/casedetail',
+                      query: {
+                        id: it?.id,
+                      },
+                    });
+                  }}
+                >
+                  <div className="centerl" style={{ marginTop: 12 }}>
+                    <img
+                      style={{ height: 49, marginRight: 12 }}
+                      src={it?.picUrl}
+                      alt=""
+                    />
+                    <span style={{ fontSize: '0.8rem' }} className="oneline">
+                      {it?.title}
+                    </span>
+                  </div>
+
+                  <p style={{ fontSize: '0.6rem', marginTop: 12 }}>
+                    {it?.caseDescribe}
+                  </p>
+                  <p
+                    style={{ margin: 0, fontSize: '0.7rem', color: '#999999' }}
+                  >
+                    相关产品：
+                    {it?.ngCaseProductList?.map((it, i) => {
+                      return (
+                        <Tag
+                          style={{
+                            margin: '2px',
+                            padding: '4px 8px',
+                            fontSize: '0.7rem',
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            it?.linkUrl && window.open(it?.linkUrl);
+                          }}
+                        >
+                          {it?.productName}
+                        </Tag>
+                      );
+                    })}
+                  </p>
+                </Card>
+              </Col>
+            );
+          })}
+
+          <Col span={24} className="center" style={{ margin: '2rem 0 1rem 0' }}>
+            <Link
+              to="/case"
+              style={{
+                fontSize: '0.6rem',
+                display: 'block',
+                width: 166,
+                height: 36,
+                backgroundColor: 'rgba(255,255,255,0.5)',
+                textAlign: 'center',
+                lineHeight: '36px',
+              }}
+            >
+              查看更多
+            </Link>
+          </Col>
+        </Row>
+      </div>
     </div>
   );
 }
 
-// IndexPage.getInitialProps = async (ctx) => {
-//   return await doFetch({url:"/indexPic/list"})
-// };
-
 export default IndexPage;

src/pages/index.less

@@ -53,7 +53,7 @@
   background-repeat: no-repeat;
   background-position: left top;
   background-size: 100% 50%;
-  padding: 2rem 8vw;
+  padding: 2rem 10%;
   margin-top: 1.2rem;
   background-color: #f0f0f0;
   .cardlist {