src/views/component/material/material.css
@font-face {
  src: url("../../../../data/font/HYWenHei-85W.ttf");
  font-family: GenshinUsedFont;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

html {
  -webkit-text-stroke: 0.018em currentColor;
  background-color: rgb(246, 242, 238);
  width: 768px;
  height: 100%;
  color: #333;
  font-family: GenshinUsedFont, monospace;
}

.material {
  position: relative;
  padding: 12px;
  height: 100%;
}

.outer {
  position: relative;
  border: 1px solid #333;
  padding: 4px;
}

.inner {
  position: relative;
  border: 1px solid #333;
  padding: 10px 18px;
}

.corner-star {
  position: absolute;
  z-index: 1;
  width: 14px;
}

.outer-circle {
  position: absolute;
  border: 1px solid #333;
  background-color: rgb(246, 242, 238);
  width: 21px;
  height: 21px;
}

.inner-circle {
  position: absolute;
  border: 1px solid #333;
  background-color: rgb(246, 242, 238);
  width: 7px;
  height: 7px;
}

.star1,
.star2 {
  top: -5px;
}

.star1,
.star3 {
  left: -5px;
}

.star2,
.star4 {
  right: -5px;
}

.star3,
.star4 {
  bottom: -5px;
}

.outer-circle1,
.outer-circle2,
.inner-circle1,
.inner-circle2 {
  top: -1px;
}

.outer-circle1,
.outer-circle3,
.inner-circle1,
.inner-circle3 {
  left: -1px;
}

.outer-circle2,
.outer-circle4,
.inner-circle2,
.inner-circle4 {
  right: -1px;
}

.outer-circle3,
.outer-circle4,
.inner-circle3,
.inner-circle4 {
  bottom: -1px;
}

.outer-circle1,
.inner-circle1 {
  border-top: none;
  border-left: none;
  border-radius: 0 0 100% 0;
}

.outer-circle2,
.inner-circle2 {
  border-top: none;
  border-right: none;
  border-radius: 0 0 0 100%;
}

.outer-circle3,
.inner-circle3 {
  border-bottom: none;
  border-left: none;
  border-radius: 0 100% 0 0;
}

.outer-circle4,
.inner-circle4 {
  border-right: none;
  border-bottom: none;
  border-radius: 100% 0 0 0;
}

.content {
  grid-column-gap: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 4px;
}

.author {
  position: absolute;
  right: 36px;
  bottom: 21px;
  font-size: 15px;
}

.material-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  margin-bottom: 20px;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjI2IiBoZWlnaHQ9IjM3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yMTYuOTI4IDM2LjI1aC0xNU05LjQyNCAxLjI1aDE1IiBzdHJva2U9IiMyRTNENTQiLz48cGF0aCBkPSJNMjI1LjIxNyA5LjExYy0zLjc3Ny0uMjItNC45MDMtMS41MDctNS4zMjUtNS4zMjYtLjIgMy44NDUtMS4zMjMgNS4wNzYtNS4zMjYgNS4zMjUgMy44NjQuMTQ5IDUuMDcyIDEuNDY5IDUuMzI2IDUuMzI2LjQ1LTMuNjg4IDEuNTk5LTQuOTA1IDUuMzI1LTUuMzI2ek0xMS42NSAyNy4zMjRDNy44NzMgMjcuMTA2IDYuNzQ4IDI1LjgxOCA2LjMyNSAyMmMtLjIgMy44NDUtMS4zMjIgNS4wNzYtNS4zMjUgNS4zMjUgMy44NjMuMTQ5IDUuMDcxIDEuNDY5IDUuMzI1IDUuMzI1LjQ1MS0zLjY4OCAxLjYtNC45MDQgNS4zMjUtNS4zMjV6IiBmaWxsPSIjMkUzRDU0IiBzdHJva2U9IiMyRTNENTQiIHN0cm9rZS13aWR0aD0iLjUiLz48cGF0aCBkPSJNMjIyLjQyNiAyOS43NTJ2LTE1TTIyMi42NzYgMzBoLTUuNmwtLjQuNFYzNk0yMjAuMTc2IDI3VjE3TTEzLjY3NiAzLjVoMTBNMy45MjYgNi43NDh2MTVNMy42NzYgN2g1LjZsLjQtLjRWMSIgc3Ryb2tlPSIjMkUzRDU0Ii8+PHBhdGggZD0iTTEzLjY3NSAzLjVoLTcuNXY4TTYuMTc2IDEwLjV2MTAiIHN0cm9rZT0iIzJFM0Q1NCIvPjxwYXRoIHN0cm9rZT0iIzJFM0Q1NCIgZD0iTTYuMTc2IDMuNWgyMTR2MzBoLTIxNHoiLz48L3N2Zz4=")
    no-repeat center;
  background-size: 100%;
  width: 195px;
  height: 32px;
  font-size: 15px;
  text-align: center;
}

.title-text {
  position: relative;
  top: 7px;
}

.tips {
  margin-top: 9px;
  font-size: 10px;
  white-space: nowrap;
}

.unit {
  margin-bottom: 34px;
}

.top-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ascension-name {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: rgb(73, 96, 131);
  min-width: 64px;
  height: 30px;
  color: rgb(234, 229, 216);
  font-size: 13px;
}

.materials-list {
  display: inline-flex;
}

.materials {
  margin-left: 4px;
  border-radius: 4px;
  width: 30px;
  height: 30px;
}

.container-item {
  display: grid;
  grid-template-areas:
    "image"
    "banner";
  justify-items: center;
  border-radius: 4px;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.item-image {
  grid-area: image / image / banner / banner;
  width: 64px;
  height: 64px;
}

.item-name-banner {
  /* display: flex; */
  grid-area: banner;
  /* flex-direction: column; */
  /* justify-content: center; */
  /* align-items: center; */
  background: #3333338c;
  width: 100%;
  height: 14px;
  overflow: hidden;
  color: white;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 0 4px #33333378;
  white-space: nowrap;
}

.item-image.five-star,
.materials.five-star {
  background: url("http://localhost:9934/resources/etc/image/5-Star.png") no-repeat center;
  background-size: 100%;
}

.item-image.four-star,
.materials.four-star {
  background: url("http://localhost:9934/resources/etc/image/4-Star.png") no-repeat center;
  background-size: 100%;
}

.item-image.three-star,
.materials.three-star {
  background: url("http://localhost:9934/resources/etc/image/3-Star.png") no-repeat center;
  background-size: 100%;
}

.item-image.two-star,
.materials.two-star {
  background: url("http://localhost:9934/resources/etc/image/2-Star.png") no-repeat center;
  background-size: 100%;
}

.item-image.one-star,
.materials.one-star {
  background: url("http://localhost:9934/resources/etc/image/1-Star.png") no-repeat center;
  background-size: 100%;
}

.item-list {
  grid-gap: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
