Blame view

天文台pc/tianwentai-ui/src/app/components/TibetanPattern.tsx 2.05 KB
bc518174   王天杨   提交两个项目文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
  export function TibetanPattern() {
    return (
      <svg className="w-full h-full opacity-20" xmlns="http://www.w3.org/2000/svg">
        <defs>
          {/* 藏式八吉祥纹样 */}
          <pattern id="auspicious-pattern" x="0" y="0" width="120" height="120" patternUnits="userSpaceOnUse">
            {/* 莲花图案 */}
            <g transform="translate(60, 60)">
              <circle cx="0" cy="0" r="15" fill="currentColor" opacity="0.1" />
              <path
                d="M 0,-15 Q 5,-20 10,-15 Q 5,-10 0,-12 Q -5,-10 -10,-15 Q -5,-20 0,-15 Z"
                fill="currentColor"
                opacity="0.2"
              />
              <path
                d="M 15,0 Q 20,5 15,10 Q 10,5 12,0 Q 10,-5 15,-10 Q 20,-5 15,0 Z"
                fill="currentColor"
                opacity="0.2"
              />
              <path
                d="M 0,15 Q -5,20 -10,15 Q -5,10 0,12 Q 5,10 10,15 Q 5,20 0,15 Z"
                fill="currentColor"
                opacity="0.2"
              />
              <path
                d="M -15,0 Q -20,-5 -15,-10 Q -10,-5 -12,0 Q -10,5 -15,10 Q -20,5 -15,0 Z"
                fill="currentColor"
                opacity="0.2"
              />
            </g>
            
            {/* 雪山纹样 */}
            <g transform="translate(20, 100)">
              <path d="M 0,0 L 10,-15 L 20,0 Z" fill="currentColor" opacity="0.15" />
            </g>
            <g transform="translate(80, 100)">
              <path d="M 0,0 L 10,-15 L 20,0 Z" fill="currentColor" opacity="0.15" />
            </g>
          </pattern>
  
          {/* 经幡装饰纹样 */}
          <pattern id="prayer-flag-pattern" x="0" y="0" width="80" height="40" patternUnits="userSpaceOnUse">
            <rect x="10" y="10" width="20" height="15" fill="currentColor" opacity="0.08" rx="2" />
            <rect x="50" y="10" width="20" height="15" fill="currentColor" opacity="0.08" rx="2" />
            <line x1="0" y1="17.5" x2="80" y2="17.5" stroke="currentColor" strokeWidth="0.5" opacity="0.1" />
          </pattern>
        </defs>
  
        <rect width="100%" height="100%" fill="url(#auspicious-pattern)" />
      </svg>
    );
  }