main
parent
7b09db551d
commit
903b5297b4
@ -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 <div>About</div> |
||||
return <div className={css.about}> |
||||
<Swiper |
||||
cssMode={true} |
||||
navigation={true} |
||||
pagination={true} |
||||
mousewheel={true} |
||||
keyboard={true} |
||||
modules={[Navigation, Pagination, Mousewheel, Keyboard]} |
||||
className="mySwiper"> |
||||
<SwiperSlide className={css.SwiperContent}><div style={{backgroundImage:`url(${yaoa5})`}}></div></SwiperSlide> |
||||
<SwiperSlide className={css.SwiperContent}><div style={{backgroundImage:`url(${loginImg})`}}></div></SwiperSlide> |
||||
</Swiper> |
||||
<div className={css.main}> |
||||
<header><h2>公司简介</h2></header> |
||||
<div> |
||||
<h3>延安嘉盛石油机械有限责任公司</h3> |
||||
<p className={css.img}> |
||||
<img src="https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/adcf2621-8487-4080-b5ca-53a20d698f58.jpg" alt=""/> |
||||
</p> |
||||
<p>延安嘉盛石油机械有限责任公司是西北地区一家大型的现代化石油管材加工企业。公司经过30余年的发展，现占地102亩，总投资3.3亿元，员工346人，具有年生产石油油管、套管30万吨，抽油杆500万米产能力，是西北地区大型的石油机械制造企业。公司地处革命圣地陕西省延安市，毗邻延安市飞机场和火车北站，并且处于陕北石油资源的区域，交通便利。公司按照现代企业制度建立的集设计、开发、生产、销售、服务一体化的生产经营和管理体系，下设6个职能部门和4个生产车间。</p> |
||||
<p>公司油套管车间的六条油管、套管生产线和一条管接箍生产线均采用数控车床进行作业，各辅助作业岗位也同时实现了电脑自动化控制，实行流水线作业、在线检测，严格按照API规范组织生产。产品涵盖￠60.32mm—￠339.72 mm等多种规格、各种壁厚的石油油管、套管产品，具有加工精度高等特点。</p> |
||||
<p>抽油杆车间采用抽油杆平锻机、抽油杆数控车床、隧道式抽油杆抛丸机、抽油杆淬火炉、抽油杆回火炉等设备，具有生产ф16～ф25等多规格抽油杆的能力。</p> |
||||
<p>公司拥有检测设备120余台（套）和70多名经验丰富的检验人员，并且建立了完善的质量体系，产品化学成分分析、力学性能试验、螺纹检验、静水压试验、无损探伤等检验项目均严格质量管理体系及API标准进行，分级控制、层层把关，从而保障产品的质量。</p> |
||||
<p>公司在日常经营中以诚信经营为企业根本，经过不懈的努力，公司产品于2007年初在陕北地区率先获得了美国石油学会API认证、公司同时获得质量（ISO9001:2008）、环境（ISO14001:2004）、职业健康安全（GB/T28001：2001）三体系管理认证，抽油杆产品获得国家质检总局颁发的生产许可证，公司还是中国石油天然气集团公司《能源一号网》的会员单位，长庆油田、川庆钻探工程公司、中石油煤层气合格的材料供应商。同时，公司还获得了各级政府部门授予的多种荣誉和称号：公司被认定为2014年度陕西省高新技术企业、陕西省民营科技企业；油套管产品连续多年被陕西省政府评为陕西省名牌产品；2011年被陕西省国税局、地税局联合授予A级纳税人称号；2010年，嘉盛商标被陕西省工商局评为陕西省商标、2009年度陕西省银行业协会信贷诚信企业；2009年度延安市安全生产先进单位；2008年度延安市优秀民营企业；2008年度延安市优秀加工型企业和纳税大户等。这些资格资质、荣誉称号的获得和健全完善，为企业的市场开拓和进一步发展奠定了坚实的基础。</p> |
||||
<p>公司长期坚持服务型、市场化的导向和原则，内重质量、外塑形象，不断健全服务机构、完善服务网络，加强产品的售前、售中和售后服务，提升服务水平，努力从传统的制造型企业向现代的服务型企业转变，产品主要销往延长油田、长庆油田、中石油煤层气、苏里格油田，还远销出口到吉尔吉斯斯坦、哈萨克斯坦等国家和地区。产品在以上油田长期使用且未出现过质量事故，以产品的质量、完善的服务和良好的信誉获得用户的长期信赖和一致好评。</p> |
||||
<p>创新是企业发展的动力。为了更好地开发新产品，服务于油田，公司充分发挥自身技术潜力，并和国内外高校、公司和研究机构广泛的开展技术交流与合作，不断研究、设计、开发适合深井、高深井、高温高压油井的产品。当前，公司和国内的研究机构合作开发的套管扣项目在技术上取得突破性进展，产品已通过了石油管材权威机构的鉴定和评价，并且于2011年开始在陕西延长石油集团油气勘探公司气井中使用，至今已经批量使用3500余吨，凭借精密的加工和严苛的检测，特殊扣套管井下服役情况良好。该项目从设计上综合性的考虑了当前国内外特殊扣的优缺点和产品的使用环境，结合多年的研究资料和产品使用情况，加工效率较高、工况条件适应性好，产品具有良好的抗拉伸、弯曲等复合载荷能力和优良的气密封性能，可广泛应用于深井、高深井和高温高压井等油田和气田生产环境。该产品属于高技术含量、高附加值的高新技术产品，能有效解决API规范产品设计的缺欠和不足，综合性的为油田公司提供规格齐全、适合需求的特色的API规范产品和非API规范产品。</p> |
||||
<p>公司通过持续改进、锐意创新，不断提升管理水平，提高产品质量和服务水平，坚持走专业化的精品加工之路，努力将延安嘉盛石油机械有限责任公司建设成西北乃至全国的石油管材和器械精品加工基地。</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
export default function NewsAndVideo(){ |
||||
return <div></div> |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
.NewsAndVideo{ |
||||
position: relative; |
||||
max-width: 1200px; |
||||
min-width: 1000px; |
||||
margin: 0 auto; |
||||
} |
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -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 <div>News</div> |
||||
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 <div className={css.News}> |
||||
<Swiper |
||||
cssMode={true} |
||||
navigation={true} |
||||
pagination={true} |
||||
mousewheel={true} |
||||
keyboard={true} |
||||
modules={[Navigation, Pagination, Mousewheel, Keyboard]} |
||||
className="mySwiper"> |
||||
<SwiperSlide className={css.SwiperContent}><div style={{backgroundImage:`url(${yaoa5})`}}></div></SwiperSlide> |
||||
<SwiperSlide className={css.SwiperContent}><div style={{backgroundImage:`url(${loginImg})`}}></div></SwiperSlide> |
||||
</Swiper> |
||||
<div className={css.main}> |
||||
<div className={css.menu}> |
||||
<div className={css.menuTitle}> |
||||
<img src="https://omo-oss-image.thefastimg.com/portal-saas/new2022122617044678164/cms/image/0fa2acb8-a027-4826-804a-ead578cd1ef1.jpg" alt=""/> |
||||
</div> |
||||
<div className={css.menuList}> |
||||
{ |
||||
groupList.map(i => { |
||||
return <div key={i.groupId}>{i.groupName}</div> |
||||
}) |
||||
} |
||||
</div> |
||||
</div> |
||||
<div className={css.body}> |
||||
<div className={css.table}> |
||||
{ |
||||
newsList.map(i => { |
||||
return <div className={css.newsBox} key={i.articleId} onClick={() => {openCat(true, i)}}> |
||||
<div>{i.articleName}</div> |
||||
<div> |
||||
<div>{i.releaseTime?.toString()?.split(' ')[0].split('-')[0]}</div> |
||||
<div>{i.releaseTime?.toString()?.split(' ')[0].split('-').slice(1,3).join('-')}</div> |
||||
</div> |
||||
</div> |
||||
}) |
||||
} |
||||
</div> |
||||
<footer> |
||||
<div> |
||||
<div className={pageNum == 1 ? css.unChoose : ''} onClick={() => pageNum == 1 ? () => {} :handleChangePage(false)}>上一页</div> |
||||
{ |
||||
new Array(parseInt(total/pageSize) + 1).fill('').map((i,j) => { |
||||
return <div key={j} className={[css.page, pageNum == j + 1 ? css.pageChoose : ''].join(' ')} onClick={() => pageNum == j+1 ? () =>{}:handleChangePage(j+1)}>{j + 1}</div> |
||||
}) |
||||
} |
||||
<div className={new Array(parseInt(total/pageSize) + 1).fill('').length == pageNum ? css.unChoose : ''} onClick={() => new Array(parseInt(total/pageSize) + 1).fill('').length == pageNum ? () => {} :handleChangePage(true)}>下一页</div> |
||||
</div> |
||||
</footer> |
||||
</div> |
||||
</div> |
||||
<div className={catState}> |
||||
<header> |
||||
<div onClick={() =>openCat(false)}>返回</div> |
||||
<div>新闻详情</div> |
||||
</header> |
||||
<div className={css.catBody}> |
||||
<div> |
||||
{ |
||||
JSON.stringify(newsData) |
||||
} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
} |
||||
|
||||
@ -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%; |
||||
} |
||||
} |
||||
@ -1,3 +1,4 @@ |
||||
import css from './index.module.scss' |
||||
export default function Video(){ |
||||
return <div>Video</div> |
||||
} |
||||
|
||||
@ -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 |
||||
}, |
||||
}) |
||||
Loading…
Reference in new issue