From 903b5297b47db9596185a3c6a0b094caed626f7d Mon Sep 17 00:00:00 2001 From: expressgy Date: Sat, 12 Aug 2023 18:46:10 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/About/index.jsx | 41 ++- src/pages/About/index.module.scss | 47 +++ src/pages/Compontents/NewsAndVideo.jsx | 3 + .../Compontents/NewsAndVideo.module.scss | 6 + src/pages/Home/index.jsx | 314 +++++++++--------- src/pages/Home/index.module.scss | 174 +++++++++- src/pages/Home/photo.svg | 1 + src/pages/Home/video.svg | 1 + src/pages/News/index.jsx | 119 ++++++- src/pages/News/index.module.scss | 195 +++++++++++ src/pages/Video/index.jsx | 1 + src/pages/Video/index.module.scss | 0 src/pages/index.jsx | 22 +- src/pages/index.module.scss | 38 +++ src/request/index.js | 33 ++ src/routes/index.jsx | 2 +- vite.config.js | 24 ++ 17 files changed, 849 insertions(+), 172 deletions(-) create mode 100644 src/pages/About/index.module.scss create mode 100644 src/pages/Compontents/NewsAndVideo.jsx create mode 100644 src/pages/Compontents/NewsAndVideo.module.scss create mode 100644 src/pages/Home/photo.svg create mode 100644 src/pages/Home/video.svg create mode 100644 src/pages/News/index.module.scss create mode 100644 src/pages/Video/index.module.scss create mode 100644 src/request/index.js diff --git a/src/pages/About/index.jsx b/src/pages/About/index.jsx index 0b852d5..35c2480 100644 --- a/src/pages/About/index.jsx +++ b/src/pages/About/index.jsx @@ -1,3 +1,42 @@ +import css from './index.module.scss' +import { Swiper, SwiperSlide } from 'swiper/react'; +// Import Swiper styles +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; +// import required modules +import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules'; +const yaoa5 = 'https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/855d519c-6d36-4de0-b9e1-72d90eee90a6.jpg_1920xaf.jpg' +const loginImg = 'https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/42f7910a-9205-4429-b89b-27d426bbe979.jpg' export default function About(){ - return
About
+ return
+ +
+
+ +
+

公司简介

+
+

延安嘉盛石油机械有限责任公司

+

+ +

+

延安嘉盛石油机械有限责任公司是西北地区一家大型的现代化石油管材加工企业。公司经过30余年的发展，现占地102亩，总投资3.3亿元，员工346人，具有年生产石油油管、套管30万吨，抽油杆500万米产能力，是西北地区大型的石油机械制造企业。公司地处革命圣地陕西省延安市，毗邻延安市飞机场和火车北站，并且处于陕北石油资源的区域，交通便利。公司按照现代企业制度建立的集设计、开发、生产、销售、服务一体化的生产经营和管理体系，下设6个职能部门和4个生产车间。

+

公司油套管车间的六条油管、套管生产线和一条管接箍生产线均采用数控车床进行作业，各辅助作业岗位也同时实现了电脑自动化控制，实行流水线作业、在线检测，严格按照API规范组织生产。产品涵盖￠60.32mm—￠339.72 mm等多种规格、各种壁厚的石油油管、套管产品，具有加工精度高等特点。

+

抽油杆车间采用抽油杆平锻机、抽油杆数控车床、隧道式抽油杆抛丸机、抽油杆淬火炉、抽油杆回火炉等设备，具有生产ф16～ф25等多规格抽油杆的能力。

+

公司拥有检测设备120余台（套）和70多名经验丰富的检验人员，并且建立了完善的质量体系，产品化学成分分析、力学性能试验、螺纹检验、静水压试验、无损探伤等检验项目均严格质量管理体系及API标准进行，分级控制、层层把关，从而保障产品的质量。

+

公司在日常经营中以诚信经营为企业根本，经过不懈的努力，公司产品于2007年初在陕北地区率先获得了美国石油学会API认证、公司同时获得质量（ISO9001:2008）、环境（ISO14001:2004）、职业健康安全（GB/T28001：2001）三体系管理认证，抽油杆产品获得国家质检总局颁发的生产许可证，公司还是中国石油天然气集团公司《能源一号网》的会员单位，长庆油田、川庆钻探工程公司、中石油煤层气合格的材料供应商。同时，公司还获得了各级政府部门授予的多种荣誉和称号：公司被认定为2014年度陕西省高新技术企业、陕西省民营科技企业；油套管产品连续多年被陕西省政府评为陕西省名牌产品；2011年被陕西省国税局、地税局联合授予A级纳税人称号；2010年，嘉盛商标被陕西省工商局评为陕西省商标、2009年度陕西省银行业协会信贷诚信企业；2009年度延安市安全生产先进单位；2008年度延安市优秀民营企业；2008年度延安市优秀加工型企业和纳税大户等。这些资格资质、荣誉称号的获得和健全完善，为企业的市场开拓和进一步发展奠定了坚实的基础。

+

公司长期坚持服务型、市场化的导向和原则，内重质量、外塑形象，不断健全服务机构、完善服务网络，加强产品的售前、售中和售后服务，提升服务水平，努力从传统的制造型企业向现代的服务型企业转变，产品主要销往延长油田、长庆油田、中石油煤层气、苏里格油田，还远销出口到吉尔吉斯斯坦、哈萨克斯坦等国家和地区。产品在以上油田长期使用且未出现过质量事故，以产品的质量、完善的服务和良好的信誉获得用户的长期信赖和一致好评。

+

创新是企业发展的动力。为了更好地开发新产品，服务于油田，公司充分发挥自身技术潜力，并和国内外高校、公司和研究机构广泛的开展技术交流与合作，不断研究、设计、开发适合深井、高深井、高温高压油井的产品。当前，公司和国内的研究机构合作开发的套管扣项目在技术上取得突破性进展，产品已通过了石油管材权威机构的鉴定和评价，并且于2011年开始在陕西延长石油集团油气勘探公司气井中使用，至今已经批量使用3500余吨，凭借精密的加工和严苛的检测，特殊扣套管井下服役情况良好。该项目从设计上综合性的考虑了当前国内外特殊扣的优缺点和产品的使用环境，结合多年的研究资料和产品使用情况，加工效率较高、工况条件适应性好，产品具有良好的抗拉伸、弯曲等复合载荷能力和优良的气密封性能，可广泛应用于深井、高深井和高温高压井等油田和气田生产环境。该产品属于高技术含量、高附加值的高新技术产品，能有效解决API规范产品设计的缺欠和不足，综合性的为油田公司提供规格齐全、适合需求的特色的API规范产品和非API规范产品。

+

公司通过持续改进、锐意创新，不断提升管理水平，提高产品质量和服务水平，坚持走专业化的精品加工之路，努力将延安嘉盛石油机械有限责任公司建设成西北乃至全国的石油管材和器械精品加工基地。

+
+
+
} diff --git a/src/pages/About/index.module.scss b/src/pages/About/index.module.scss new file mode 100644 index 0000000..f937a85 --- /dev/null +++ b/src/pages/About/index.module.scss @@ -0,0 +1,47 @@ +.about{ + .SwiperContent{ + position: relative; + height: 300px; + //min-width: 1000px; + //width: 100%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + & > img{ + height: 100%; + } + & > div{ + position: relative; + height: 100%; + width: 100%; + background-repeat:no-repeat; + background-size:cover; + background-position:center; + } + } + position: relative; + color: #333333; + & > div.main{ + position: relative; + max-width: 1200px; + min-width: 1000px; + margin: 0 auto; + & > header{ + position: relative; + text-align: center; + } + & > div{ + position: relative; + & > p.img{ + float: right; + text-indent: 1em; + } + & > p{ + font-size: 14px; + line-height: 1.8em; + text-indent: 2em; + } + } + } +} diff --git a/src/pages/Compontents/NewsAndVideo.jsx b/src/pages/Compontents/NewsAndVideo.jsx new file mode 100644 index 0000000..cec5495 --- /dev/null +++ b/src/pages/Compontents/NewsAndVideo.jsx @@ -0,0 +1,3 @@ +export default function NewsAndVideo(){ + return
+} diff --git a/src/pages/Compontents/NewsAndVideo.module.scss b/src/pages/Compontents/NewsAndVideo.module.scss new file mode 100644 index 0000000..6bb9f55 --- /dev/null +++ b/src/pages/Compontents/NewsAndVideo.module.scss @@ -0,0 +1,6 @@ +.NewsAndVideo{ + position: relative; + max-width: 1200px; + min-width: 1000px; + margin: 0 auto; +} diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx index 8079f07..214f695 100644 --- a/src/pages/Home/index.jsx +++ b/src/pages/Home/index.jsx @@ -1,4 +1,6 @@ import css from './index.module.scss'; +import {useState, useEffect} from "react"; +import {useNavigate} from 'react-router-dom' import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper styles import 'swiper/css'; @@ -9,7 +11,8 @@ import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules'; import loginImg from './loginImg.jpg' import yaoa5 from './yaoa5.jpg' - +import photoImg from './photo.svg' +import videoImg from './video.svg' const swiperBG1 = `https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/29543145-3d23-4c1d-b020-e0b6b9f60629.jpg` const swiperBG2 = `https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/8b13bf9a-dfdf-4c86-bc6e-f42807b56f1a.jpg` @@ -18,7 +21,71 @@ const powerBG1 = `https://omo-oss-image.thefastimg.com/portal-saas/new2022122617 const powerBG2 = `https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/dfb076ec-6cae-49c4-8344-a80fd1ea2622.jpg_560xaf.jpg` const powerBG3 = `https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/c07119f0-c300-4532-bc4e-09be93421edb.jpg_560xaf.jpg` + + +import {getNews, getVideo} from "../../request/index.js"; + export default function App(){ + const [newsList, setNewsList] = useState([]); + const [videoList, setVideoList] = useState([]); + const navigate = useNavigate() + + useEffect(() => { + async function getData(){ + const newsListResd = await getNews({ + pageNum: 1, + pageSize: 3, + status: 0, + order:0 + }) + const videoListResd = await getVideo({ + pageNum: 1, + pageSize: 3, + status: 0, + order:0 + }) + let news = newsListResd?.data?.rows; + let video = videoListResd?.data?.rows; + if(news){ + while (news.length != 3){ + news.push({ + safe:true, + articleId: new Date().getTime().toString() + }) + } + }else{ + news = [] + while (news.length != 3){ + news.push({ + safe:true, + articleId: new Date().getTime().toString() + }) + } + } + if(video){ + while (video.length != 3){ + video.push({ + safe:true, + videoId: new Date().getTime().toString() + }) + } + }else{ + video = [] + while (video.length != 3){ + video.push({ + safe:true, + videoId: new Date().getTime().toString() + }) + } + } + console.log(news) + console.log(video) + setNewsList(news) + setVideoList(video) + } + getData() + + },[0]) return <>
@@ -116,191 +183,112 @@ export default function App(){
-
+
-
-
+
+
+
+
01
产品供应
+
+
+
+ 延安嘉盛是中国石油天然气集团公司一级供应商，并且是一家进入中石油能源一 号网的民营企业合格供应商。产品主要销往中石油下属的长庆油田、新疆油田、川庆钻探 公司、延安石油天然气公司、中石油煤层气公司、苏里格油田，也是延长集团主要供应 商。同时还远销到吉尔吉斯斯坦、哈萨克斯坦等国家和地区。 +
+
-
+
-
-
+
+
+
+
02
产品质量
+
+
+
延安嘉盛是西北地区一家生产气密封螺纹的民营企业。我公司现有特殊螺纹油套 管6类，已获专利5项，其中，XGC1特殊扣螺纹套管，XGT1特殊扣螺纹油管，TC-50套 管，XGL经济型特殊扣螺纹套管，JST4特殊扣油管，各系列产品质量性能可靠，市场占 有率高。
+
-
+
-
-
+
+
+
+
03
技术研究
+
+
+
延安嘉盛已建立西北地区首个石油行业院士工作站。公司于2019年5月与工程院院士 李鹤林合作成立了“延安嘉盛院士工作站”，并与李鹤林院士所在的中国石油集团石油管 工程技术研究院，建立了长期战略合作关系。共同开展油田油气井管柱研究;围绕石油行 业发展急需解决的超深井、高温高压井况的材料选型等重大关键难题开展技术攻关、科技 成果转化和产业化发展。
+
+
+
+
+
新闻中心
+
+
+ { + newsList.map(item => { + return
navigate('news')}> + { + item.safe ?
+
+
+
暂无数据
+
+
:
+
+
{item.articleName}
+
{item.releaseTime.toString().split(' ')[0]}
+
+ } +
+ }) + } +
+
+
+
+
+
+
视频中心
+
+
+ { + videoList.map(item => { + return
navigate('video')}> + { + item.safe ?
+
+
+
暂无数据
+
+
:
+
+
{item.videoTittle}
+
{item.releaseTime.toString().split(' ')[0]}
+
+ } +
+ }) + } +
+
+
} -// 宏任务 和 微任务 -console.log(1) - -function a(){ - console.log(2) -} - -(function autoRun(){ - return console.log(3) -})() -setTimeout(() => { - console.log(4) -}) -function b(){ - return new Promise((resolve, reject) =>{ - console.log(5) - new Promise((res) => { - console.log(6) - res(7) - }) - resolve(8) - setTimeout(() => { - reject(9) - }) - }) -} -a() -b().then( - res => { - console.log(res) - }, - e => { - console.log(e) - } -) - - -// this指向问题 -class A{ - constructor() { - this.name = 'haha' - } - one(){ - return () => { - console.log(this.name) - } - - } - two(){ - return function (){ - console.log(this?.name) - } - } -} -const aClass = new A() -const one = aClass.one() -const two = aClass.two() -one() -two() -// two.call(aClass) -// 打印结果是什么 -// 如何让输出都为name - -// 解构赋值 -let num1 = 99, num2 = 98; -const str1 = 'World', str2 = 'Hello'; -[num1, num2] = [num2, num1]; -// [str1, str2] = [str2, str1]; -console.log(num1, num2); -console.log(str1, str2); - -// 三点运算符 -const list1 = [1,2,3,4,5]; -const list2 = [6,7,8,9,10]; -let list = []; -// 合并list1和list2 -// 方法1 list = [...list, ...list2] -// 方法2 list = list1.concat(list2) -// 排序list -// list.sort((x,y)=> x - y) -// 数组去重 -let arrNum = [1,1,3,4,4,9,1,4,6,8] -// console.log(Array.from(new Set(arrNum))); - - -// 基础数据类型和复杂数据类型 -function autoRun(){ - let name = 'Nier' - let people = { - age: 24, - sex: 1, - birthday: `991332` - } - function makeNewPeople(name, people){ - people.name = name - name = 'Anto' - console.log(name, people) - } - console.log(name, people) - makeNewPeople(name, people) - console.log(name, people) -} -autoRun() - -// 拷贝 -function autoRun2(){ - const CP1 = { - cpu: 'i9 13900k', - mem: '32GB 7600MHz DDR5', - videoCard: 'RTX 4090' - } - const CP2 = { - cpu: 'i5 8250U', - mem: '8GB 3200MHz DDR4', - videoCard: 'GTX 1050 MaxQ' - } - - // 合并CP1和CP2 - // const CP = {...CP1, ...CP2} - const CPList = [CP1, CP2] - // 如何修改CP1而不导致CPList变化 -} - - -// 格式化数据 -function autoRun3(){ - const resd = [ - { id: 32, name: 'a', fatherId: 0 }, - { id: 16, name:'b', fatherId: 32 }, - { id: 8, name: 'c', fatherId: 4 }, - { id: 7, name: 'c', fatherId: 8 }, - { id: 6, name: 'c', fatherId: 4 }, - { id: 5, name: 'c', fatherId: 4 }, - { id: 4, name: 'c', fatherId: 1 }, - { id: 3, name: 'c', fatherId: 16 }, - { id: 2, name: 'c', fatherId: 5 }, - { id: 1, name: 'c', fatherId: 0 } - ] -} -// 将resd转化为树结构 - - - -// sessionStorage和localStorage的区别，从页面A打开页面B sessionStorage会失效吗 -function autoRun5(){ - window.location.href = "http://www.baidu.com"; - window.history.go(-1); - window.open('page.html'); - this.$router.push('/goods/add') -// 点击跳转 - this.$router.replace({path:'/goods/add'}); - this.$router.go(-1) -} diff --git a/src/pages/Home/index.module.scss b/src/pages/Home/index.module.scss index 8e0dab7..0c9da68 100644 --- a/src/pages/Home/index.module.scss +++ b/src/pages/Home/index.module.scss @@ -135,6 +135,8 @@ .power{ position: relative; + background-color: #f7f7f7; + margin: 40px 0; & > div{ position: relative; max-width: 1200px; @@ -147,7 +149,7 @@ padding: 30px 0; & > div{ position: relative; - line-height: normal; + line-height: 60px; font_radio: 2; display-radio: 1; font-size: 28px; @@ -160,17 +162,187 @@ position: relative; display: flex; height: 450px; + overflow: hidden; & > div{ position: relative; margin: 0 10px; cursor: pointer; + flex:1; } & > div:nth-child(1){ margin-left: 0; } & > div:nth-child(3){ + margin-right: 0; + } + & > div.powerBox{ + &:hover div.powerText{ + height: 350px; + background: #187bc3; + color: #fefefe; + & > div.powerHeader{ + margin-top: 50px; + height: 120px; + } + } + & > div{ + position: relative; + height: 100%; + & > div.powerImg{ + position: relative; + height: 300px; + overflow: hidden; + & > img { + width: 100%; + } + } + & > div.powerText{ + position: absolute; + height: 150px; + width: 100%; + bottom: 0; + background-color: #fefefe; + transition: all cubic-bezier(0.25,0.1,0.25,1) 500ms; + & > div.powerHeader{ + height: 150px; + margin-top: 0px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + transition: margin-top cubic-bezier(0.25,0.1,0.25,1) 500ms; + & > div{ + & > div{ + font-weight: bold; + text-align: center; + } + & > div:nth-child(1){ + font-size: 24px; + line-height: 48px; + } + & > div:nth-child(2){ + font-size: 18px; + line-height: 36px; + } + } + } + & > div.powerBody{ + position: relative; + text-indent: 2em; + width: 300px; + height: 150px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 14px; + } + } + } + } + } + } + } + .newsAndVideo{ + position: relative; + background-color: #fff; + padding: 40px 0; + & > div{ + position: relative; + max-width: 1200px; + margin: 0 auto; + & > header{ + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 30px 0; + & > div{ + position: relative; + line-height: 60px; + font_radio: 2; + display-radio: 1; + font-size: 28px; + letter-spacing: 5px; + font-family: Microsoft YaHei; + color: #333; + } + } + & > div{ + position: relative; + display: flex; + height: 300px; + //overflow: hidden; + & > div:nth-child(1){ margin-left: 0; } + & > div:nth-child(3){ + margin-right: 0; + } + &>div.newsBox{ + position: relative; + margin: 0 10px; + cursor: pointer; + display: flex; + width: 300px; + flex-direction: column; + flex: 1; + background-color: #f7f7f7; + padding: 5px; + //box-shadow: 2px 2px 10px 0 #33333311; + & > div.safe{ + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + text-align: center; + color: #666; + & > div{ + position: relative; + height: 200px; + } + img{ + height: 160px; + } + } + & > div.newsBBB{ + position: relative; + display: flex; + flex-direction: column; + height: 100%; + &:hover div:nth-child(1){ + transform: scale(1.02); + box-shadow: 0px 23px 20px -20px #33333399; + } + & > div:nth-child(1){ + position: relative; + flex: 1; + background-repeat:no-repeat; + background-size:cover; + background-position:center; + transition: all ease-in-out 200ms; + & > img{ + width: 100%; + } + } + & > div:nth-child(2){ + position: relative; + flex-shrink: 0; + height: 28px; + margin: 10px 0; + line-height: 28px; + } + & > div:nth-child(3){ + position: relative; + flex-shrink: 0; + font-size: 14px; + color: #666; + margin-bottom: 5px; + } + } + } } } } diff --git a/src/pages/Home/photo.svg b/src/pages/Home/photo.svg new file mode 100644 index 0000000..39452d5 --- /dev/null +++ b/src/pages/Home/photo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Home/video.svg b/src/pages/Home/video.svg new file mode 100644 index 0000000..05e13a5 --- /dev/null +++ b/src/pages/Home/video.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/News/index.jsx b/src/pages/News/index.jsx index 39f1958..e6c2b8d 100644 --- a/src/pages/News/index.jsx +++ b/src/pages/News/index.jsx @@ -1,3 +1,120 @@ +import {useState, useEffect} from "react"; +import css from './index.module.scss' +import { Swiper, SwiperSlide } from 'swiper/react'; +// Import Swiper styles +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; +// import required modules +import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules'; + +import {getGroupList, getNews} from "../../request/index.js"; + +const yaoa5 = 'https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/855d519c-6d36-4de0-b9e1-72d90eee90a6.jpg_1920xaf.jpg' +const loginImg = 'https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/42f7910a-9205-4429-b89b-27d426bbe979.jpg' + + export default function News(){ - return
News
+ const [groupList, setGroupList] = useState([]); + const [newsList, setNewsList] = useState([]); + const [pageNum, setPageNum] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(0); + const [catState, setCatState] = useState(css.cat); + const [newsData, setNewsData] = useState(null) + + useEffect(() => { + async function getGL(){ + const resd = await getGroupList(0) + setGroupList(resd.data || []) + const newsListResd = await getNews({ + pageNum, + pageSize, + status: 0, + order:0 + }) + setNewsList(newsListResd?.data?.rows) + setTotal(newsListResd?.data.total) + } + getGL() + },[pageNum]) + + function handleChangePage(turnSign){ + turnSign === true? setPageNum(pageNum+1): ''; + turnSign === false? setPageNum(pageNum-1): ''; + (/^[0-9]+.?[0-9]*/).test(turnSign) ? setPageNum(turnSign):''; + } + + function openCat(state, data = null){ + state ? setCatState([css.cat, css.catOpen].join(' ')): setCatState(css.cat) + data && setNewsData(data) + } + + + return
+ +
+
+ +
+
+
+ +
+
+ { + groupList.map(i => { + return
{i.groupName}
+ }) + } +
+
+
+
+ { + newsList.map(i => { + return
{openCat(true, i)}}> +
{i.articleName}
+
+
{i.releaseTime?.toString()?.split(' ')[0].split('-')[0]}
+
{i.releaseTime?.toString()?.split(' ')[0].split('-').slice(1,3).join('-')}
+
+
+ }) + } +
+
+
+
pageNum == 1 ? () => {} :handleChangePage(false)}>上一页
+ { + new Array(parseInt(total/pageSize) + 1).fill('').map((i,j) => { + return
pageNum == j+1 ? () =>{}:handleChangePage(j+1)}>{j + 1}
+ }) + } +
new Array(parseInt(total/pageSize) + 1).fill('').length == pageNum ? () => {} :handleChangePage(true)}>下一页
+
+
+
+
+
+
+
openCat(false)}>返回
+
新闻详情
+
+
+
+ { + JSON.stringify(newsData) + } +
+
+
+
} diff --git a/src/pages/News/index.module.scss b/src/pages/News/index.module.scss new file mode 100644 index 0000000..d4c77be --- /dev/null +++ b/src/pages/News/index.module.scss @@ -0,0 +1,195 @@ +.News{ + position: relative; + .SwiperContent{ + position: relative; + height: 300px; + //min-width: 1000px; + //width: 100%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + & > img{ + height: 100%; + } + & > div{ + position: relative; + height: 100%; + width: 100%; + background-repeat:no-repeat; + background-size:cover; + background-position:center; + } + } + & > div.main{ + position: relative; + max-width: 1200px; + min-width: 1000px; + margin: 20px auto; + display: flex; + & > div.menu{ + position: relative; + flex-shrink: 0; + width: 221px; + & > div{ + padding-left: 10px; + user-select: none; + } + & > div.menuTitle{ + position: relative; + font-size: 18px; + line-height: 2.5em; + padding: 0; + line-height: 0; + border-bottom: 0; + } + & > div.menuList{ + position: relative; + line-height: 2em; + margin: 1px 0; + transition: all ease-in-out 300ms; + &:hover{ + cursor: pointer; + background-color: #e70012; + color: #fff; + } + } + } + & > div.body{ + position: relative; + flex: 1; + margin-left: 10px; + overflow: hidden; + & > div.table{ + position: relative; + & > div.newsBox{ + position: relative; + border-bottom: 1px dashed rgba(218,218,218,1); + cursor: pointer; + display: flex; + height: 70px; + padding: 20px 30px; + transition: all cubic-bezier(0.25,0.1,0.25,1) 600ms; + left: 0; + &:hover{ + background: #e7eaf4; + left: 5px; + div:last-child{ + color: #173394 !important; + } + } + & > div:first-child{ + position: relative; + flex: 1; + } + & > div:last-child{ + position: relative; + flex-shrink: 0; + width: 80px; + color: rgba(153,153,153,1); + transition: all cubic-bezier(0.25,0.1,0.25,1) 600ms; + & > div:first-child{ + min-height: 20px; + font_radio: 2; + font-size: 14px; + text-align: right; + line-height: 1; + } + & > div:last-child{ + font-size: 34px; + font-family: Impact; + text-align: right; + line-height: 1.5; + } + } + } + } + & > footer{ + position: relative; + display: flex; + //align-items: center; + justify-content: center; + margin-top: 20px; + & >div{ + position: relative; + display: flex; + & > div{ + position: relative; + margin: 0 5px; + border: 1px solid #33333333; + padding: 5px; + cursor: pointer; + border-radius: 3px; + transition: all cubic-bezier(0.25,0.1,0.25,1) 600ms;; + &:hover{ + border: 1px solid #187bc3; + color: #187bc3; + } + } + &>div.page{ + position: relative; + min-width: 20px; + text-align: center; + } + &>div.pageChoose{ + border: 1px solid #187bc3; + background: #187bc3; + color: #fefefe; + } + & > div.unChoose{ + border: 1px solid #33333333; + background: #33333311; + color: #333; + cursor: not-allowed; + } + } + } + } + } + .cat{ + position: fixed; + height: 0; + width: 100%; + left: 0; + bottom: 0; + transition: height cubic-bezier(0.25,0.1,0.25,1) 600ms;; + background: #f7f7f7fc; + z-index: 999; + overflow: hidden; + display: flex; + flex-direction: column; + & > header{ + position: relative; + height: 50px; + flex-shrink: 0; + border-bottom: 1px solid #99999999; + display: flex; + &>div:first-child{ + position: relative; + flex-shrink: 0; + width: 100px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + } + & > div.catBody{ + position: relative; + flex: 1; + overflow: hidden; + &>div{ + position: relative; + min-width: 1000px; + max-width: 1200px; + overflow: auto; + margin: 0 auto; + } + } + } + .catOpen{ + height: 100%; + width: 100%; + } +} diff --git a/src/pages/Video/index.jsx b/src/pages/Video/index.jsx index d84d581..217dcef 100644 --- a/src/pages/Video/index.jsx +++ b/src/pages/Video/index.jsx @@ -1,3 +1,4 @@ +import css from './index.module.scss' export default function Video(){ return
Video
} diff --git a/src/pages/Video/index.module.scss b/src/pages/Video/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/index.jsx b/src/pages/index.jsx index e784b45..d54ecb6 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,7 +1,8 @@ import css from './index.module.scss' -import {Outlet} from 'react-router-dom' +import {Outlet, useNavigate} from 'react-router-dom' import headerPng from './header.png' export default function Index(){ + const navigate = useNavigate() return <>
@@ -9,14 +10,25 @@ export default function Index(){ +
+
+
+
+
延安嘉盛石油机械有限责任公司版权所有
+ + +
网站建设：西安升邦联创技术服务有限公司
+
+
+
} diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 48681f4..a654dd9 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -27,6 +27,7 @@ position: relative; margin: 0 20px; cursor: pointer; + color: #333; } } } @@ -34,4 +35,41 @@ & > div{ position: relative; } + & > footer{ + position: relative; + background-color: rgba(26,26,26,1); + user-select: none; + & > div{ + position: relative; + max-width: 1200px; + margin: 0 auto; + & > div:nth-child(1){} + & > div:nth-child(2){ + position: relative; + color: #f2f2f2b3; + line-height: 5; + font-size: 14px; + display: flex; + & > div{ + &>a{ + all:unset; + cursor: pointer; + } + } + & >div:nth-child(1){ + flex: 5; + } + & >div:nth-child(2){ + user-select: auto; + flex: 5; + } + & >div:nth-child(3){ + flex: 5; + } + & >div:nth-child(4){ + flex: 5; + } + } + } + } } diff --git a/src/request/index.js b/src/request/index.js new file mode 100644 index 0000000..ca9a1aa --- /dev/null +++ b/src/request/index.js @@ -0,0 +1,33 @@ +import axios from "axios"; + +const instance = axios.create({ + timeout: 10000, + baseURL: "/api", // 服务器请求地址 +}); + +instance.interceptors.response.use( + async (response) => { + const data = response.data; + if (data.status === 200 || data.code === 200) return data; + } +); + + +export const getNews = params => instance({ + url: `/jiaSheng/civilization/article/getPage`, + method: 'get', + params +}) +export const getVideo = params => instance({ + url: `/jiaSheng/civilization/video/getPage`, + method: 'get', + params +}) + +export const getGroupList = type => instance({ + url: `/jiaSheng/civilization/group/getGroupList`, + method: 'get', + params:{ + groupType: type + }, +}) diff --git a/src/routes/index.jsx b/src/routes/index.jsx index fe8b758..d1f2ffe 100644 --- a/src/routes/index.jsx +++ b/src/routes/index.jsx @@ -31,7 +31,7 @@ export default [ }, { path: '/', //当路径的端口号后面没有地址时就渲染'' - element: //只要``组件被渲染，就会修改路径，切换视图 + element: //只要``组件被渲染，就会修改路径，切换视图 } // { // path: '/home', //路径，这里式一级路由，所以在路径前要带上'/' diff --git a/vite.config.js b/vite.config.js index 5a33944..252232c 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,4 +4,28 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + server: { + host: "0.0.0.0", + proxy: { + '/api': { + // target: "https://app.uair.cc/api",// 目标地址 + // target: `http://10.10.10.168:8080`,// sar目标地址 + target: `http://10.10.10.200/api/`,// 测试服务器址 + // target: "http://10.10.10.146:9309",// Rock目标地址 + // target: `http://togy.top:18080/api/`,// sar目标地址 + ws: true,// 开始ws代理 + changeOrigin: true, // 开发模式 + rewrite: (path) => path.replace(/^\/api/, "") + }, + '/statics': { + // target: "https://app.uair.cc/api",// 目标地址 + target: `http://10.10.10.168:9300`,// sar目标地址 + // target: `http://10.10.10.200/api/`,// 测试服务器址 + // target: "http://10.10.10.146:9309",// Rock目标地址 + // target: `http://togy.top:18080/api/`,// sar目标地址 + ws: true,// 开始ws代理 + changeOrigin: true, // 开发模式 + }, + } + }, })